鼠标移动出现特效

Html

Css

 body {
	margin:0px;
}
#canvas {
	margin:0px auto;
	box-shadow:0 0 10px #000;
}

const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 canvas.width = 1000;
 canvas.height = 600;
 canvas.style.background = '#000';

class Ball {
     constructor(x, y, color) {
         this.x = x;
         this.y = y;
         this.color = color;
         this.r = 20;

}

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

}
 let ball = new Ball(50, 50, 'red');
 ball.render();

//会移动的小球
 class MoveBall extends Ball {
     constructor(x, y, color) {
         super(x, y, color);
         //量的变化
         this.dX = _.random(-5, 5);
         this.dY = _.random(5, 5);
         this.dR = _.random(1, 3);
     }
     upDate() {
         this.x += this.dX;
         this.y += this.dY;
         this.r -= this.dR;
         if (this.r < 0) {
             this.r = 0;
         }
     }

}
 //实例化小球
 let ballArr = [];
 let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];
 //监听鼠标移动
 canvas.addEventListener('mousemove', function(e) {
     //  let e=e||event;
     ballArr.push(new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)]));
     //  console.log(ballArr);
 })
 //开启定时器
 setInterval(function() {
     //清屏
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     //绘制
     for (let i = 0; i < ballArr.length; i++) {
         ballArr[i].render();
         ballArr[i].upDate();
     }
 }, 50);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

鼠标移动出现特效



代码描述：超好看鼠标移动特效

鼠标移动会出现特效，里面的颜色可随意更改，代码里有注释

1

最新

发表评论全部评论

暂时没有评论！

RT 0

2017/11/9 11:52:06

jsstar可以给鼠标移动带来星星特效，也可以设置任意图片
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

超级无敌破天荒大帅哥

相关代码

鼠标移动出现特效

最新