本文共 3115 字，大约阅读时间需要 10 分钟。

第一次登录进去博客园，发现它在鼠标点击页面的时候会出现炫彩小球，感觉挺好玩的，学了canvas就来做啦！

效果展示

实现思路

1. 首先以小球为对象，创建一个构造函数
   在这里存放小球需要的数据(x,y,r,color等)

// 绘制小球        function Ball(x, y, r) {               this.x = x;              this.y = y;            this.r = r;  // 初始半径            this.color = getRandom();  // 获取随机颜色            // 随机改变小球的移动路径            this.dx = parseInt(Math.random() * 10);              this.dy = parseInt(Math.random() * 10);            ballArr.push(this);  //ballArr存储渲染出来的小球的数组        }        // 把16进制存储到一个数组中，随机获取数组中的值        function getRandom() {               var allType = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];            var color = '#';            for (let i = 0; i < 6; i++) {                   var random = parseInt(Math.random() * allType.length);                color += allType[random];            }            return color;        }

2. 给原型添加渲染小球的方法

Ball.prototype.render = function () {               ctx.beginPath();            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);            ctx.fillStyle = this.color;            ctx.fill();        }

3. 给原型添加更新的方法，让小球动起来
   随机改变小球的位置，减小小球的半径，当小球的半径为0时清除小球

Ball.prototype.update = function () {               // 小球的运动            this.x += this.dx;            this.y += this.dy;            this.r -= 0.7;            // 如果小球半径小于0，从数组中删除            if (this.r < 0) {                   this.remove();            }        }

4. 把小球渲染函数好啦，接下来写渲染爱心的函数，这里用到了drawImage，通过这个函数，传入x和y的值，就把爱心渲染出来啦！

var img = new Image();img.src = '../img/爱心 (1).png';function paintHeart(x, y) {               dx = parseInt(Math.random() * 10);            dy = parseInt(Math.random() * 20);            x = x - 10;            y = y - 12;            ctx.drawImage(img, x, y, 12, 12);        }

5. 最后就是在点击事件中应用这些方法
   这里要注意的就是，在小球更新位置的时候，爱心也要更新位置，但是跟小球是不同步的，因此在清空画布之后要再次渲染爱心，并且在小球都清除之后要清除定时器还有画布，最后一步清除画布目的是清除爱心。
   (如果看不懂这句话的话，可以尝试一下不清除定时器)

canvas.onmousedown = function () {               x = event.offsetX;            y = event.offsetY;            paintHeart(event.offsetX, event.offsetY);            new Ball(event.offsetX, event.offsetY, 6);            new Ball(event.offsetX, event.offsetY, 6);            new Ball(event.offsetX, event.offsetY, 6);            new Ball(event.offsetX, event.offsetY, 6);            new Ball(event.offsetX, event.offsetY, 6);            new Ball(event.offsetX, event.offsetY, 6);            timer = setInterval(function () {                   ctx.clearRect(0, 0, canvas.width, canvas.height);                if (x > 0) {                       x = x - 1;                }                if (y > 0) {                       y = y - 1;                }                paintHeart(x, y);                for (let i = 0; i < ballArr.length; i++) {                       ballArr[i].update();                    if (ballArr[i]) {                           ballArr[i].render();                    }                }            }, 100)            setTimeout(() => {                   ctx.clearRect(0, 0, canvas.width, canvas.height);                clearInterval(timer);            }, 600);        }

源码

html+css+js