html5＜canvas转换之万花筒＞

Bertha 。 2022-06-15 07:25 132阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            canvas\{  
                background: red;  
            \}  
        </style>  
        <script>  
            window.onload = function()\{  
                var canvas = document.getElementById('canvas');  
                var cobj = canvas.getContext('2d');//获取绘图环境  
                cobj.rect(100,100,100,100);//用这个，后面再用isPointInPath,就不能判断点是否在路径上，因为用了fillRect，系统会自动再后面加上beginPath，这样前面的设置会被清除点，所以应该用Rect，再用fill就解决问题  
                cobj.fill();  
                var num = 0;  
                canvas.onclick = function(e)\{  
                    var mx = e.layerX;  
                    var my = e.layerY;  
                    if(cobj.isPointInPath(mx,my))\{  
                        setInterval(function()\{  
                            cobj.clearRect(0,0,600,600);  
                            num++;  
                            cobj.save();  
                            cobj.translate(100, 100);  
                            cobj.scale(Math.sin(num\*Math.PI/180),Math.sin(num\*Math.PI/180));  
                            cobj.rotate(num\*Math.PI/180);  
                            cobj.translate(-50, -50);  
                            cobj.beginPath();  
                            cobj.rect(0,0,100,100);  
                            cobj.fill();  
                            cobj.restore();  
                        \}, 1);  
                    \}  
                \}  
            \}  
        </script>  
    </head>  
    <body>  
    <canvas id="canvas" width=400 height=400>         
    </canvas>  
    </body>

</html>

![Image 1][]![Center][]

[Image 1]: 
[Center]: /images/20220615/a059c14a5a83412b9a33e2f032f01597.png