canvas中实现旋转缩放的方块

Posted azure-zero

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

效果：

技术分享图片

 

以上是关于canvas中实现旋转缩放的方块的主要内容，如果未能解决你的问题，请参考以下文章

Unity中实现通过鼠标对物体进行旋转平移缩放

在Delphi中实现图片的旋转、缩放

在下面的类中实现带有屏幕限制的 Imageview Rotation

HTML5 Canvas 翻译、旋转、缩放

JS中canvas画布绘制中如何实现缩放，位移，旋转

jQuery + Canvas 伸缩旋转方块