利用canvas实现鼠标跟随效果_JavaScript

利用canvas实现鼠标跟随效果

最近在学习中看到利用canvas实现各种效果，我也仿照做一个。由于学习了vue和es6我决定用vue和es6的新特性来实现。

废话不多说先上图看看效果。

接下来让我们一步一步来创建一个。

第一步，创建html加入canvas

<template>
<div class="canvasDiv">
<canvas id="myCanvas">当前浏览器不支持canvas</canvas>
</div>
</template>

如果浏览器不支持，请切换到最新的浏览器。

第二步，在mounted中对canvas进行初始化。

由于要先加载canvas才能进行初始化，所以要在mounted中初始化。否则会报错。

let myCanvasEle = document.getElementById("myCanvas");
this.ctx = myCanvasEle.getContext("2d");
myCanvasEle.width = this.canvasWidth;
myCanvasEle.height = this.canvasHeight;
myCanvasEle.style.background = "black";

第三步，定义ball.js类

/**
* 小球类
*/
class Ball {

constructor(ctx, x, y, color) {
this.ctx = ctx;
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}

/**
* 绘制小球
*/
draw() {

this.ctx.save();

this.ctx.beginPath();

this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);

this.ctx.fillStyle = this.color;

this.ctx.fill();

this.ctx.restore();

}

}

/**
* 移动球类继承球
*/
class MoveBall extends Ball {

constructor(ctx, x, y, color) {
super(ctx, x, y, color);

this.dx = random(-5, 5);
this.dy = random(-5, 5);
this.dr = random(3, 5);

}

//改变小球的x,y,r使小球动起来
update() {

this.x += this.dx;
this.y += this.dy;
this.r -= this.dr;

if(this.r < 0) {
this.r = 0;
}

}

}

/**
* 根据start和end生成随机数
*/
const random = (start, end) => Math.floor(Math.random() * (end - start) + start);

export default {

getBall(ctx, x, y, color) {

let moveBall = new MoveBall(ctx, x, y, color);

return moveBall;
}

}

在ball.js中定义了两个类，一个小球类，一个是移动的小球，其中移动的小球继承了小球,暴露出一个getBall方法。

第四步，在main中调用。

//增加移动事件
myCanvasEle.addEventListener("mousemove", (e) => {
this.ballArray.push(ball.getBall(this.ctx, e.offsetX, e.offsetY, this.colorArray[Math.floor(Math.random() * (this.colorArray.length))]));
});

//定时器
setInterval(() => {
this.clear();
this.draw();
}, 50);


//清屏
clear() {    
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
}

//绘制
draw() {    
for(let i = 0; i < this.ballArray.length; i++) {
this.ballArray[i].draw();
this.ballArray[i].update();
}

}