html5＜canvas转换之万花筒＞

<!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>

html5＜canvas转换之万花筒＞

html5＜canvas转换之万花筒＞

相关推荐