码迷,mamicode.com
首页 > 其他好文 > 详细

canvas实例:旋转缩放的方块

时间:2016-11-29 13:51:51      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:height   实例   nload   value   text   log   set   rip   方法   

首先在页面中创建一个canvas标签:

<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>

js部分:

注意save()和restore()的运用,在num累加的情况下,保存路径和恢复路径可以让方块匀速运动;

定义变量num和value来设置临界点的方法。

<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();          //让旋转匀速运动 不然num值是累加的 旋转角度越来越大
        
        oGC.clearRect(0,0,oC.width,oC.height);
        oGC.translate(200,200);

        oGC.rotate(num*Math.PI/180);
        
        //这里设置缩放效果  利用num2和value值的关系控制缩放的临界点  
        if(num2==100){
            value = -1;
        }else if(num2==0){
            value = 1;
        }
        num2 += value;
        oGC.scale(num2*(1/50),num2*(1/50));

        oGC.translate(-50,-50);
        oGC.fillRect(0,0,100,100);

        oGC.restore();
    },30)
};
</script>

 

canvas实例:旋转缩放的方块

标签:height   实例   nload   value   text   log   set   rip   方法   

原文地址:http://www.cnblogs.com/angelatian/p/6113087.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!