欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

利用canvas实现鼠标跟随效果

程序员文章站 2022-08-09 21:33:54
最近在学习中看到利用canvas实现各种效果,我也仿照做一个。由于学习了vue和es6我决定用vue和es6的新特性来实现。 废话不多说先上图看看效果。 接下来让我们一步一步来创建一个。 第一步,创建html加入canvas 如果浏览器不支持,请切换到最新的浏览器。 第二步,在mounted中对ca ......

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

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

利用canvas实现鼠标跟随效果

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

第一步,创建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();
}

}

 


到这里整体就差不多了,总的来说比较简单。上面也是比较核心的部分。完整的代码放到github上。地址是https://github.com/like2372/gorgeousBall