html5＜canvas转换之万花筒＞

最新推荐文章于 2024-05-29 18:45:17 发布

sensus森森

最新推荐文章于 2024-05-29 18:45:17 发布

阅读量1.1k

点赞数

分类专栏： HTML4/HTML5 文章标签： html5 万花筒

本文链接：https://blog.csdn.net/qq_27682041/article/details/72779237

版权

HTML4/HTML5 专栏收录该内容

30 篇文章 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>

sensus森森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5＜canvas转换之万花筒＞

canvas{ background: red; } window.onload = function(){ var canvas = document.getElementById('canvas');
复制链接

扫一扫

专栏目录