zoukankan      html  css  js  c++  java
  • html5 canvas-变幻函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        body{background: #131115;}
        #c1{background: #fbf7fe;}
        </style>
        <script>
        window.onload=function(){
    
            var oC=document.getElementById('c1');
            var oGC=oC.getContext('2d');
            /*按原有坐标偏移*/
            oGC.translate(200,100);
            /*旋转45度 以坐标顶点*/
            oGC.rotate(45*Math.PI/180);
            /*按照比例放大缩小*/
            oGC.scale(1,1);
            oGC.fillRect(0,0,100,100);
           
    
        }
    
       </script>
    </head>
    <body>
        <canvas id="c1" width="500" height="500"><!-- 默认宽300; 高150 -->
        <span>不支持camvas浏览器</span>
        </canvas>
    </body>
    </html>

    http://www.5227788.cn/static/Change.html

    简单动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        body{background: #131115;}
        #c1{background: #fbf7fe;}
        </style>
        <script>
        window.onload=function(){
    
            var oC=document.getElementById('c1');
            var oGC=oC.getContext('2d');
            var num=0;
            var num2 = 0;
            var value = 1;
    
            setInterval(function(){
            
                num++;
                /*函数的封装*/
                oGC.save();
                /*清楚画布*/
                oGC.clearRect(0,0,oC.width,oC.height);
                
                  /*按原有坐标偏移*/
                 oGC.translate(100,100);
    
            if(num2 == 100){
                value = -1;
            }
            else if(num2 == 0){
                value = 1;
            }
            
            num2 += value;
            oGC.fillStyle='red';
                /*每次换50/1*/
                oGC.scale( num2*1/50,num2*1/50 );
                /*每次旋转的角度*/
                oGC.rotate(num*Math.PI/180);
                /*偏移为中心*/
                oGC.translate(-50,-50);
                /*实心正方形*/
                oGC.fillRect(0,0,100,100);
                
                /*储存路径*/
                oGC.restore();
            },30)
    
    
           
    
        }
    
       </script>
    </head>
    <body>
        <canvas id="c1" width="500" height="500"><!-- 默认宽300; 高150 -->
        <span>不支持camvas浏览器</span>
        </canvas>
    </body>
    </html>
  • 相关阅读:
    在Xsheel Linux上安装nodejs和npm
    判断js中的数据类型的几种方法
    Sequelize 中文API文档-1. 快速入门、Sequelize类
    php中 ob_start()有什么作用
    PHP错误类型及屏蔽方法
    ajax对象的获取及其常用属性
    linux工作笔记
    Redis和Memcached的区别
    MySQL架构
    Http协议三次握手过程
  • 原文地址:https://www.cnblogs.com/hack-ing/p/6251906.html
Copyright © 2011-2022 走看看