canvas实现旋转缩放的方块

canvas实现旋转缩放的方块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{background: #000;}
            #ca{background:#999}
        </style>
        <script>
            window.onload=function(){
                var oc=document.getElementById("ca");
                var pa=oc.getContext('2d');
                var num=0;
                var numb=0;
                var value=1;
                pa.translate(100,100);
                setInterval(function(){
                    num++;
                    pa.save();
                    pa.clearRect(-100,-100,oc.width,oc.height);
                    
                    if(numb==100){
                        value=-1;
                    }else if(numb==0){
                        value=1;
                    }
                    numb+=value;
                    pa.scale(numb*1/50,numb*1/50);
                    
                    pa.rotate(num*Math.PI/180);
                    pa.translate(-50,-50);
                    pa.fillRect(0,0,100,100);
                    pa.restore();
                },30);
            };
        </script>
        
    </head>
    <body>
        <canvas id="ca" width="400px" height="400px"></canvas>
        
        
    </body>
</html>

效果：

 

posted @ 2018-11-30 16:58  A-zero  阅读(613)  评论(0)  编辑  收藏  举报