index.html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>五彩特效</title><style>* {margin: 0;padding: 0;list-style: none;}html,body,div {width: 100%;height: 100%;}#box {position: relative;background: #000;}</style></head><body><div id="box"></div></body><script src="js/ball.js"></script><!-- <script>var ball = new Ball({parentId: 'box',left: 100,top: 200,bgColor: 'yellow'})ball.render()</script> --><script>// min and max includedfunction randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}// 1. 获取当前盒子的nodevar box = document.getElementById('box');// 数组的颜色var colorArr = ['red', 'white', 'green', 'pink', 'blue', 'red', 'yellow', 'purple'];// 存放创建小球var ballArr = [];// 2. 监听鼠标在盒子上的移动box.onmousemove = function(ev) {// console.info(ev)// 创建小球var ball = new Ball({parentId: 'box',left: ev.clientX, // 当前鼠标X坐标top: ev.clientY, // 当前鼠标Y坐标bgColor: colorArr[randomIntFromInterval(0, colorArr.length - 1)] // 颜色随机});ballArr.push(ball) // 将每次创建出来的小球存起一个数组};// 3. 设置定时器setInterval(() => {// 3.1 清除上一针的小球for (var i = 0; i < box.children.length; i++) {box.children[i].remove()}// 3.2 让小球移动 变小for (var j = 0; j < ballArr.length; j++) {ballArr[j].render()ballArr[j].update()}}, 50);</script></html>
ball.js
function Ball(options) {this._init(options)}Ball.prototype = {// 初始化_init: function(options) {// 圆的必要属性this.parentId = options.parentId;this.left = options.left;this.top = options.top;this.r = 60;this.bgColor = options.bgColor || 'red'// 小球的变化量this.dX = randomIntFromInterval(-5, 5); // 水平this.dY = randomIntFromInterval(-5, 5); // 垂直this.dR = randomIntFromInterval(1, 3); // 圆的半径},// 渲染render: function() {var parentNode = document.getElementById(this.parentId);var childNode = document.createElement('div');parentNode.appendChild(childNode)childNode.style.position = 'absolute';childNode.style.left = this.left + 'px';childNode.style.top = this.top + 'px';childNode.style.width = this.r + 'px';childNode.style.height = this.r + 'px';childNode.style.borderRadius = '50%';childNode.style.backgroundColor = this.bgColor;},// 更新update: function() {this.left += this.dX;this.top += this.dY;this.r -= this.dR;// 圆的半径小0的时候 干掉小球if (this.r <= 0) {this.r = 0;// 过滤r=0的小球ballArr = ballArr.filter(item => item.r != 0);}}};
![html画布实现小球沿直线下落 [面向对象的案例]在canvas画布内实现小球的随机移动...](https://1500zi.500zi.com/uploadfile/img/15/934/912fe71a4dd5805241024a9dab0d2691.jpg)
