前端开发canvas鼠标滑过动画

移动端前端开发框架
前端界面快速开发框架
电商网站前端开发框架

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            body {
                margin: 0;
                padding: 0;
            }
            #canvas {
                background-color: #000;
            }
        </style>
    </head>
    <body>
        <canvas id=”canvas”></canvas>
        <script>
            var canvas = document.getElementById(‘canvas’);
            var w = canvas.width = window.innerWidth;
            var h = canvas.height = window.innerHeight;
            //获取浏览器窗口的高宽,outerWidth 和 outerHeight包含工具条和滚动条窗口的宽度和高度
            var ctx = canvas.getContext(‘2d’);
            var nums = 2;//生成个数
            var Obj = [];//保存属性
            var colors = [‘red’, ‘blue’, ‘green’, ‘yellow’];//颜色设置
            canvas.onmousemove = function (ev) {
                var x = ev.clientX;
                var y = ev.clientY;
                //获取时间被触发时鼠标指针在浏览器页面的坐标位置
                //在 IE 以外的浏览器,使用 window.pageXOffset 和 window.pageYOffset 即可
                for (var i = 0; i < nums; i++) {
                    var o = {< br />
                        x: Math.random() * 30 + x, //0-30
                            y: Math.random() * 30 + y, //0-30
                                r: Math.round(Math.random() * 20 + 1),
                    color: colors[Math.floor(Math.random() * colors.length)],
                    vx: Math.random() * 3, //-3 – 0
                        vy: Math.random() * 3 //-3 – 0
                    //random 去0-1随机数
                }
                Obj.push(o);//push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
                if (Obj.length == 300) {
                    Obj.shift();//shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
                }
                circle(ctx, Obj[i].x, Obj[i].y, Obj[i].r, Obj[i].color);
            } < br />
             }
            //绘制圆形
            function circle(cxt, x, y, r, color) {
                ctx.save();
                cxt.beginPath();
                ctx.arc(x, y, r, 0, 2 * Math.PI);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.restore();
            }
            !function animate() {
                ctx.clearRect(0, 0, w, h);
                for (var i = 0; i < Obj.length; i++) {
                    Obj[i].x += Obj[i].vx;
                    Obj[i].y += Obj[i].vy;
                    if (Obj[i].x > w || Obj[i].x < 0) {
                        Obj[i].vx = -Obj[i].vx;
                    } else if (Obj[i].y > h || Obj[i].y < 0) {
                        Obj[i].vy = -Obj[i].vy;
                    }
                    circle(ctx, Obj[i].x, Obj[i].y, Obj[i].r, Obj[i].color);
                }
                window.requestAnimationFrame(animate);
            }();
        </script>
    </body>
</html>
webapp前端开发框架
web前端页面开发框架
前端开发面试框架问题
» 本文来自:前端开发者 » 《前端开发canvas鼠标滑过动画》
» 本文链接地址:https://www.rokub.com/6912.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!