【广州前端】- 在vue中使用canvas做一个炫酷的鼠标跟随 - 黑马程序员技术交流社区

[AppleScript] 纯文本查看 复制代码

<template>

<div class="canvasDiv">

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

</div>

</template>

[AppleScript] 纯文本查看 复制代码

let myCanvasEle = document.getElementById("myCanvas");

this.ctx = myCanvasEle.getContext("2d");

myCanvasEle.width = this.canvasWidth;

myCanvasEle.height = this.canvasHeight;

myCanvasEle.style.background = "black";

[AppleScript] 纯文本查看 复制代码

/**

* 小球类

*/

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;

}

}

[AppleScript] 纯文本查看 复制代码

//增加移动事件

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);

}

//欢迎加入全栈开发交流群一起学习交流：864305860



//绘制

draw() {    

for(let i = 0; i < this.ballArray.length; i++) {

this.ballArray.draw();

this.ballArray.update();

}

}