canvas实例：旋转缩放的方块

首先在页面中创建一个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>