实现效果：
首先要引入vue.js
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
canvas {
background-color: black;
}
</style>
<body>
<canvas id="canvas" width="" height=""></canvas>
<script type="text/javascript">
const canvas = new Vue({
data() {
return {
}
},
mounted() { //mounted生命周期：页面已经挂载，可以获取dom操作
let canvas = document.getElementById('canvas')
window.onresize = canvasOnresize() //重置浏览器视窗的大小
//（1）如果浏览器视窗的宽高（即当前浏览器页面的可视区域大小）发生改变,画布的canvans宽高也随之动态响应改变
function canvasOnresize() {
canvas.height = document.getElementsByTagName('body')[0].clientHeight //拿到当前浏览器页面的实际可视高度，将其赋值给我们画布的高度
canvas.width = document.getElementsByTagName('body')[0].clientWidth //拿到当前浏览器页面的实际可视宽度，将其赋值给我们当前画布的宽度
}
canvasOnresize() //调用函数：我们上面实现的动态响应的画布窗口函数功能
//（2）画笔的初始化工作
let Drawing_environment = canvas.getContext("2d") //getContext() 方法返回一个用于在画布上绘图的二维绘图环境。
let ballList = [] //这是一个用来装载我们小球的对象数组
let ballColorList = ["#c37e5f", "#c65306", "#cddb8f", "#3c5e91", "#afc8ba", "#e18dac", "#b80233"] //小球生成的颜色配置方案
//开始面向对象编程,工厂模式构造函数的编程模式
function Ball(x, y) { //鼠标坐标参数
this.x = x //鼠标在横轴上的坐标
this.y = y //鼠标的y轴上的坐标
this.color = ballColorList[Math.floor(this.mathRandom(0, 7))] //封装函数mathRandom：随机生成小球颜色
this.xSpeed = this.mathRandom(-5, 5); //小球在x轴的分散速度
this.ySpeed = this.mathRandom(-5, 5); //y轴的分散速度
this.Alpha1 = 1; //调节小球的透明度，深色
this.Alpha2 = 0.85; //浅色
}
//开始绘画生成小球
Ball.prototype.update = function () { //prototype 属性使您有能力向对象添加属性或方法，涉及原型和原型链方面的知识。
Drawing_environment.save() //保存绘画状态
Drawing_environment.beginPath() //开始画布的绘画路径
Drawing_environment.fillStyle = this.color // 设置小球背景颜色【默认是颜色的数组的0号位】
Drawing_environment.arc(this.x, this.y, 10, 0, Math.PI * 2, false) //arc() 方法创建一个图形
//参数解释：小球的x轴中心坐标，y同理,也就是以鼠标移动过程作为位置所在为中心
//10 小球的半径
// 0 绘图角度，这里我们不需要，因为我们是圆，
//Math.PI * 2 很好理解，就是我们的圆的面积公式
// 最后一个参数：规定应该逆时针还是顺时针绘小球。False = 顺时针，true = 逆时针
Drawing_environment.fill() //开始填充我们的小球
Drawing_environment.closePath() //小球绘画完成
}
//捕捉处理小球在视窗上的移动过程轨迹,让小球发生透明度变化
Ball.prototype.move = function () {
this.Alpha1 *= this.Alpha2
Drawing_environment.globalAlpha = this.Alpha1; //例如绘制一个红色的圆形，然后将透明度 (globalAlpha) 设置为 0.2，然后再绘制一个绿色的以此类推
this.x += this.xSpeed //实现连续分散效果
this.y += this.ySpeed
}
//随机生成 随机数
Ball.prototype.mathRandom = function(min, max) {
return (max - min) * Math.random() + min
}
//监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
ballList.push(new Ball(e.clientX, e.clientY))//动态获取鼠标滑动坐标位置
})
//封装函数：实现小球不断改变，触发事件
changeBall()
function changeBall() {
Drawing_environment.clearRect(0, 0, canvas.width, canvas.height) //clearRect() 方法清空给定图形内的指定的像素,这里要实现的效果就是让小球消失。
//循环Ball实例上方法
ballList.map((item) => {
item.update()
item.move()
})
//按照电脑最优状态执行定动画效果
requestAnimationFrame(changeBall)
}
},
methods: {
}
}).$mount('#canvas')
</script>
</body>
</html>
调节小球大小、自定义绘制图代码：
来源：https://blog.csdn.net/qq_43291759/article/details/116004680
网友评论