跟随鼠标炫彩小球 [code]canvas没有让我扫兴，真的很有意思[/code]实现结果超等炫酷
实现原理
实现过程创建小球通过创建函数收纳小球全部的样式，再通过实例化函数，将鼠标当前的位置传递给[code]Ball[/code]函数，让通过实例化创建出来的小球，末了将创建出来的小球存入数组中，数组中以对象情势存放着每个小球的属性和属性值 [code] function Ball(x, y, r) { this.x = x; this.y = y; this.r = r; this.color = getRandom();//随机天生颜色 this.dx = parseInt(Math.random() * 10) - 5;//天生随机移动的位置 this.dy = parseInt(Math.random() * 10) - 5;//`-5`是让小球能向四周随机移动 ballArr.push(this);//添加小球 } //监听鼠标移动事件 canvas.addEventListener('mousemove', function (e) { new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20)); /*实例化Ball为Ball对象通过__proto__来调用原型的方法*/ }) [/code]天生随机颜色[code]对于[code]color[/code]这个属性，可以通过6位16进制的值来表现一种颜色[/code]因此，可以通过随机产生一个6位的16进制数来做为随机颜色 将[code]0到f[/code]这16个数存入数组中，通过随机天生6个[code]0到16[/code]的索引值，如许就能通过数组的索引号随机的获取6个到[code]0到f[/code]中的数了 [code][code]split[/code]的作用是：以括号内的参数为标记符来分割字符串，返回数组[/code] [code] //设置随机颜色 function getRandom() { var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色 var allTypeArr = allType.split(',');//通过','分割为数组 var color = '#'; for (var i = 0; i < 6; i++) { //随机天生一个0-16的数 var random = parseInt(Math.random() * allTypeArr.length); color += allTypeArr[random]; } return color;//返回随机天生的颜色 } [/code]渲染小球[code]给函数的原型链中添加[code]render[/code]方法，让每一个通过[code]Ball[/code]函数实例化出来的对象，带有这些方法[/code]这个函数的作用是，通过[code]Ball[/code]的参数天生一个圆形，在实例化的时间，会天生一个对象，这个对象里就存放的[code]x,y,r[/code]这些值 [code] 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();//添补 } [/code]更新小球信息因为天生的小球[code]x,y,r[/code]是固定的，所以小球的位置也是固定的，不会改变 因此必要通过改变每个小球的位置和半径让小球动起来，当小球的半径小于0时，调用[code]remove[/code]方法将小球从数组中删除 [code] /* 更新小球位置和半径 小于0时扫除 */ Ball.prototype.update = function () { this.x += this.dx;//x改变 this.y += this.dy;//y改变 this.r -= 0.1;//半径减小 if (this.r < 0) { this.remove();//调用添加的remove方法 } } [/code]删除小球这是上面调用的[code]remove[/code]方法，当this也就是当前小球半径小于0时i，遍历整个数组，找到这个this，也就是”这个小球“，通过调用数组中的方法，删除掉数组的这个元素 [code]splice(index,num) 方法可删除从 index 处开始删除num个元素[/code] [code] Ball.prototype.remove = function () { for (var i = 0; i < ballArr.length; i++) { if (ballArr[i] == this) { ballArr.splice(i, 1);//找到这个小于0 的元素，删除 } } } [/code]渲染画布通过定时器，不断的更新画布，重要是这几个步调
完整代码 [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: black; } canvas { display: block; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <canvas width="1000px" height="1000px" id="myCanvas"> 当前欣赏器版本不支持，请升级欣赏器 </canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); //定义球的位置和半径 function Ball(x, y, r) { this.x = x; this.y = y; this.r = r; this.color = getRandom();//随机天生颜色 this.dx = parseInt(Math.random() * 10) - 5;//天生随机移动的位置 this.dy = parseInt(Math.random() * 10) - 5; ballArr.push(this);//添加小球 } /* 更新小球位置和半径 小于0时扫除 */ Ball.prototype.update = function () { this.x += this.dx; this.y += this.dy; this.r -= 0.1; if (this.r < 0) { this.remove();//调用添加的remove方法 } } Ball.prototype.remove = function () { for (var i = 0; i < ballArr.length; i++) { if (ballArr[i] == this) { ballArr.splice(i, 1);//找到这个小于0 的元素，删除 } } } //渲染小球 画小球 //在原型中添加方法 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(); } //监听鼠标移动事件 canvas.addEventListener('mousemove', function (e) { new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20)); //实例化Ball为Ball对象通过__proto__来调用原型的方法 console.log(ballArr); }) var ballArr = []; setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏 for (var i = 0; i < ballArr.length; i++) { ballArr[i].update();//更新小球 if (ballArr[i]) { ballArr[i].render();//渲染小球 } } }, 20); //设置随机颜色 function getRandom() { var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色 var allTypeArr = allType.split(',');//通过','分割为数组 var color = '#'; for (var i = 0; i < 6; i++) { var random = parseInt(Math.random() * allTypeArr.length); //随机天生一个0-16的数 color += allTypeArr[random]; } return color;//返回随机天生的颜色 } </script> </body> </html> [/code]到此这篇关于Canvas跟随鼠标炫彩小球的实现的文章就先容到这了,更多干系Canvas跟随鼠标 内容请搜索脚本之家以前的文章或继续欣赏下面的干系文章，希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/770948.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:20 , Processed in 0.060701 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
