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

canvas中实现旋转缩放的方块

时间:2018-11-30 17:35:36      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:load   int   img   get   win   bubuko   window   interval   value   

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>

效果:

技术分享图片

 

canvas中实现旋转缩放的方块

标签:load   int   img   get   win   bubuko   window   interval   value   

原文地址:https://www.cnblogs.com/azure-zero/p/10045212.html

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