html鼠标点击出现小球

Posted 2023-04-06

动
html绘制小球并跟随鼠标移动,Canvas跟随鼠标炫彩小球的实现

黄利好
转载
关注
0点赞·318人阅读
跟随鼠标炫彩小球

canvas没有让我失望，真的很有意思
实现效果

超级炫酷

实现原理

创建小球

给小球添加随机颜色，随机半径

鼠标移动通过实例化，新增小球

通过调用给原型新增的方法，来实现小球的动画效果

通过定时器不断地更新画布

实现过程

创建小球

通过创建函数收纳小球所有的样式，再通过实例化函数，将鼠标当前的位置传递给Ball函数，让通过实例化创建出来的小球，最后将创建出来的小球存入数组中，数组中以对象形式存放着每个小球的属性和属性值

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__来调用原型的方法*/

)

生成随机颜色

对于color这个属性，可以通过6位16进制的值来表示一种颜色

因此，可以通过随机产生一个6位的16进制数来做为随机颜色

将0到f这16个数存入数组中，通过随机生成6个0到16的索引值，这样就能通过数组的索引号随机的获取6个到0到f中的数了

split的作用是：以括号内的参数为标志符来分割字符串，返回数组

//设置随机颜色

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;//返回随机生成的颜色



渲染小球

给函数的原型链中添加render方法，让每一个通过Ball函数实例化出来的对象，带有这些方法

这个函数的作用是，通过Ball的参数生成一个圆形，在实例化的时候，会生成一个对象，这个对象里就存放的x,y,r这些值

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();//填充



更新小球信息

因为生成的小球x,y,r是固定的，所以小球的位置也是固定的，不会改变

因此需要通过改变每个小球的位置和半径让小球动起来，当小球的半径小于0时，调用remove方法将小球从数组中删除

/* 更新小球位置和半径 小于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方法





删除小球

这是上面调用的remove方法，当this也就是当前小球半径小于0时i，遍历整个数组，找到这个this，也就是”这个小球“，通过调用数组中的方法，删除掉数组的这个元素

splice(index,num) 方法可删除从 index 处开始删除num个元素

Ball.prototype.remove = function ()

for (var i = 0; i < ballArr.length; i++)

if (ballArr[i] == this)

ballArr.splice(i, 1);//找到这个小于0 的元素，删除 参考技术A html鼠标点击出现小球:1：增加小球的业务，其逻辑我先例给你：
1.1：你说了，点击按钮，所以先写一个按钮，并绑定点击事件。
1.2：增加小球，那就必须要创建元素标签。其JS中的DOM方法是parent.createElement("div");
1.2：然后是追加给HTML文档中 方法是parent.appendChild(parent.createElement("div"));
1.3：之后就是定义样式。
2：上述中的parent，是其父级元素，在JS中创建一个元素或者删除一个元素必须要先找到其父级元素。jQuery有自删功能

JS_DOM之小球随鼠标移动事件

DOM事件之鼠标事件——小案例（块随鼠标移动事件）

 

html

1 <img id="ballImg" src="./images/ball-light-2.gif" title="彩色闪烁小球">

js:

 1  var currentX = 0;
 2       var currentY = 0;
 3       var desX = 0;
 4       var desY = 0; 
 5 
 6          window.onload = function(){
 7           var ball = document.getElementById("ballImg");
 8 
 9           
10 
11           document.addEventListener("mousemove",function(event){
12             var e = event||window.event;
13 
14             desX = e.clientX - ball.offsetWidth/2;
15             desY = e.clientY - ball.offsetHeight/2;
16             //console.log(desX+","+dexY);
17             move(ball);
18           })
19 
20 
21        }
22        var timer = null;
23        function move(ball){
24         clearInterval(timer);
25          var i = 0;
26          var speedX = (desX - currentX)/100;
27          var speedY = (desY - currentY)/100;
28         timer = setInterval(function(){
29            // console.log(desX+","+dexY);
30             currentX = currentX + speedX
31             currentY = currentY + speedY
32             ball.style.left =  currentX+ "px";
33             ball.style.top =  currentY + "px";
34             i++;
35            
36             console.log(i)
37             if(i == 100){
38               ball.style.left =  desX+ "px";
39               ball.style.top =  desY + "px";
40               clearInterval(timer);
41             }
42           },1)
43        }

 

效果展示：(PS懒得加边界了哈哈哈哈哈哈就凑合着看？)

 

 

 

 

以上内容，如有错误请指出，不甚感激。