Canvas中创建动画的方式就是不断的清除屏幕然后重绘
由于移动的轨迹是由一个个圆构成，那我们就应该使用数组存储圆的信息（xy坐标，半径），然后在鼠标移动的时候将鼠标的位置信息存放在数组中
所以监听onmousemove事件就是为了拿到鼠标的信息
window.onmousemove = function(event) {
X = event.clientX // 当前在屏幕的x位置
Y = event.clientY // 当前在屏幕的y位置 // 将信息存入圆数组
round_arr.push({
X:X,
Y:Y,
radius:para.radius
o:1
})
}
设置
color在onmousemove中，我们已经将坐标信息和半径存入round_arr圆数组中，接下来就设置颜色了
在para对象里，默认的color是false，说明圆的颜色是随机的，如果color不为false，则圆的颜色就为color的颜色
if(para.color){
circleColor = para.color
}else{
color = Math.random() * 360
}若想要设置颜色渐变
if (!para.color) {
color += .1;
circleColor = 'hsl(' + color + ',100%,80%)';
}
如果要让颜色变化，则需要将颜色变化的代码放在一个会一直执行的函数
定义
animation() 函数 !important
function animate() { if (!para.color) { # 设置颜色
color += .1
color2 = 'hsl(' + color + ',100%,80%)'
}
ctx.clearRect(0, 0, WIDTH, HEIGHT) # 清除屏幕
for (var i = 0; i < round_arr.length; i++) {
ctx.fillStyle = circleColor
ctx.beginPath()
ctx.arc( round_arr[i].X ,round_arr[i].Y,round_arr[i].radius,0, Math.PI * 2) # 画圆
ctx.closePath()
ctx.fill()
round_arr[i].radius += para.radius # 增大半径
round_arr[i].o -= para.o # 消失快慢
if( round_arr[i].o <= 0){ # 移除圆
round_arr.splice(i,1)
i--
}
}
window.requestAnimationFrame(animate) # 使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用
}
requestAnimationFrame()会告诉浏览器，你需要执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。requestAnimationFrame()使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用
完整代码
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>鼠标屏幕互动动画</title>
<style>
* {
padding: 0;
margin: 0;
}
#canvas {
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
