鼠标跟随七彩效果
时间：2023-04-05 21:40:04
HTML5
以前在网上看到别人的这个效果。我觉得这很酷也很难，但是当我真正了解如何去做时，我会发现它其实并没有那么难。使用画布。初看效果可能不是很好看啊。1、首先创建一个canvas（大小和样式可以自己定义）2.获取当前画布并准备绘制。让canvas=document.getElementById('canvas'),context=canvas.getContext('2d');3.画圆context.arc(x,y,size,startAngle,endAngle);//这里顺时针逆时针写的不是很顺，我们看看怎么写。我使用对象方法来创建圆。圆构造函数Circle(x,y,size,speed){this.x=x;//x坐标this.y=y;//y坐标this.size=size;//大小this.color=getRandomCokor();//随机颜色this.X=getRandom(speed);//x轴上的随机移动速度this.Y=getRandom(speed);//y轴上随机移动速度circleArr.push(this);//放入数组保存}创建图形Circle.prototype.createCircle=function(){context.beginPath();context.arc(this.x,this.y,this.size,0,2*Math.PI);context.fillStyle=this.color;//填充颜色context.fill();context.stroke();这&&this.move();//移动函数}moveCircle.prototype.move=function(){this.x+=this.X;//X轴位移this.y+=this.Y;//Y轴位移this.r-=1;//缩小半径的大小（这里我就直接固定大小了）if(this.r<=0){this.delCircle();//如果半径小于0，删除元素}}deleteCircle.prototype.delCircle=function(){for(leti=circleArr.length-1;i>=0;i--){if(circleArr[i]===this){circleArr.splice(i,1);//删除该元素}}}在鼠标移动时创建一个圆形画布。鼠标上ove=functionmousemove(e){letcircle=newCircle(e.clientX,e.clientY,rValue,speedValue);context.clearRect(0,0,canvas.width,canvas.height);//每次清除CanvascircleArr.forEach(function(element,index){element.createCircle();//创建每个元素});}获取随机颜色函数functiongetRandomCokor(){letcolorR=getRandom(255),colorG=getRandom(255),colorB=getRandom(255),rgb=`rgb(${colorR},${colorG},${colorB})`;returnrgb;}functiongetRandom(num){returnMath.floor(Math.random(0,1)*(num)+1);}当鼠标离开或点击时清除画布和当前数组canvas.onmouseleave=canvas.onmousedown=functionmouseDown(){circleArr.length=0;context.clearRect(0,0,canvas.width,canvas.height);}接下来我们展开功能，先看看效果：即可以自定义小球的大小和位移HTML结构当前半径：
当前速度：
获取每个大小并赋值letrRange=document.getElementById('rRange'),//sizerText=document.getElementById('rText'),//大小显示框speedRange=document.getElementById('speedRange'),//速度speedText=document.getElementById('speedText'),//速度大小显示框rValue=+rRange.value,//大小speedValue=+speedRange.value;//速度rText.value=rValue;//赋值显示speedText.value=speedValue;//赋值显示改变时重新赋值rRange.onchange=functionvalueChange(e){//sizerValue=+this.value;rText.value=rValue;}speedRange.onchange=functionvalueChange(e){//速度speedValue=+this.value;speedText.value=speedValue;}+整体代码letcanvas=document.getElementById('canvas'),//获取canvasrRange=document.getElementById('rRange'),//大小rText=document.getElementById('rText'),speedRange=document.getElementById('speedRange'),//速度speedText=document.getElementById('speedText'),context=canvas.getContext('2d'),circleArr=[],rValue=+rRange.value,speedValue=+speedRange.value;rText.value=rValue;//赋值显示speedText.value=speedValue;functionCircle(x,y,size,speed){//构造函数this.x=x;这个.y=y;this.size=大小；this.color=getRandomCokor();this.X=getRandom(速度);this.Y=getRandom(速度);circleArr.push(this);}Circle.prototype.createCircle=function(){//创建图形context.beginPath();context.arc(this.x,this.y,this.size,0,2*Math.PI);context.fillStyle=this.color;context.fill();context.stroke();这&&this.move();}Circle.prototype.move=function(){//移动this.x+=this.X;这个.y+=这个.Y;这个.r-=1;如果(this.r<=0){this.delCircle();}}Circle.prototype.delCircle=function(){//删除for(leti=circleArr.length-1;i>=0;i--){if(circleArr[i]===this){circleArr.拼接（我，1）；}}}rRange.onchange=functionvalueChange(e){//当大小改变时重新赋值rValue=+this.value;rText.value=rValue;}speedRange.onchange=functionvalueChange(e){//speedReassignspeedValue=+this.value;speedText.value=speedValue;}canvas.onmousemove=functionmousemove(e){//鼠标在画布上移动letcircle=newCircle(e.clientX,e.clientY,rValue,speedValue);context.clearRect(0,0,canvas.width,canvas.height);circleArr.forEach(function(element,index){element.createCircle();});}canvas.onmouseleave=canvas.onmousedown=functionmouseDown(){circleArr.length=0;context.clearRect(0,0,画布.width,canvas.height);}functiongetRandomCokor(){//生成随机颜色letcolorR=getRandom(255),colorG=getRandom(255),colorB=getRandom(255),rgb=`rgb(${colorR},${colorG},${colorB})`;returnrgb;}functiongetRandom(num){returnMath.floor(Math.random(0,1)*(num)+1);}我只使用canvassize的区域绘制图形，你可以修改绘制图形整个文档
