鼠标跟随炫彩效果

5次阅读

共计 4304 个字符，预计需要花费 11 分钟才能阅读完成。

以前在网上看到了别人这个效果，感觉很酷也很难，但当真的去了解怎么做的时候会发现其实没那么难。用到的就是 canvas。
先来看一下效果
可能不是很好看啊。
1. 先创建一个 canvas（大小、样式自己随意定义）
<canvas id=”canvas” width=”300″ height=”300″></canvas>
2. 获取到当前的 canvas，并准备画图。
let canvas = document.getElementById(‘canvas’),
context = canvas.getContext(‘2d’);
3. 画圆形
context.arc(x, y, size, startAngle, endAngle); // 这里就不写顺时针逆时针了
下面我们就来看看怎么做吧。我以对象的方法去创建圆形。
圆形构造函数
function Circle(x, y, size, speed) {
this.x = x; // x 坐标
this.y = y; // y 坐标
this.size = size; // 大小
this.color = getRandomCokor(); // 随机的颜色
this.X = getRandom(speed); // x 轴随机的移动速度
this.Y = getRandom(speed); // y 轴随机的移动速度
circleArr.push(this); // 放到一个数组保存起来
}
创建图形
Circle.prototype.createCircle = function () {
context.beginPath();
context.arc(this.x, this.y, this.size, 0, 2*Math.PI);
context.fillStyle = this.color; // 填充的颜色
context.fill();
context.stroke();
this && this.move(); // 移动函数
}
移动
Circle.prototype.move = function () {
this.x += this.X; // x 轴位移量
this.y += this.Y; // Y 轴位移量
this.r -= 1; // 半径缩小的尺寸（这里我就直接固定大小了）
if(this.r <= 0){
this.delCircle(); // 如果半径小于 0，删除元素
}
}
删除
Circle.prototype.delCircle = function () {
for (let i = circleArr.length – 1; i >= 0; i–) {
if(circleArr[i] === this){
circleArr.splice(i, 1); // 删除那个元素
}
}
}
当鼠标移动的时候创建圆形
canvas.onmousemove = function mousemove(e) {
let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);
context.clearRect(0, 0, canvas.width, canvas.height); // 每次清理干净画布
circleArr.forEach(function(element, index) {
element.createCircle(); // 创建每一个元素
});
}
获得随机颜色函数
function getRandomCokor() {
let colorR = getRandom(255),
colorG = getRandom(255),
colorB = getRandom(255),
rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;
return rgb;
}
function getRandom(num) {
return Math.floor(Math.random(0, 1) * (num) + 1);
}
当鼠标离开或点击的时候清空画布和当前数组
canvas.onmouseleave = canvas.onmousedown = function mouseDown() {
circleArr.length = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
}
下面我们再来拓展一下功能
先看下效果：就是能自定义球的大小和位移大小。
HTML 结构
<div class=”app”>
<canvas id=”canvas” width=”300″ height=”300″></canvas>
<h3> 当前半径：</h3>
<input type=”text” id=”rText”>
<input type=”range” min=”1″ max=”20″ id=”rRange”>
<h3> 当前速度：</h3>
<input type=”text” id=”speedText”>
<input type=”range” min=”1″ max=”20″ id=”speedRange”>
</div>
获取各个大小并赋值
let rRange = document.getElementById(‘rRange’), // 大小
rText = document.getElementById(‘rText’), // 大小显示框
speedRange = document.getElementById(‘speedRange’), // 速度
speedText = document.getElementById(‘speedText’)，// 速度大小显示框
rValue = +rRange.value, // 大小
speedValue = +speedRange.value; // 速度
rText.value = rValue; // 赋值显示
speedText.value = speedValue; // 赋值显示
当改变的时候重新赋值
rRange.onchange = function valueChange(e) {// 大小
rValue = + this.value;
rText.value = rValue;
}

speedRange.onchange = function valueChange(e) {// 速度
speedValue = + this.value;
speedText.value = speedValue;
}
+ 整体代码
let canvas = document.getElementById(‘canvas’), // 获取 canvas
rRange = document.getElementById(‘rRange’), // 大小
rText = document.getElementById(‘rText’),
speedRange = document.getElementById(‘speedRange’), // 速度
speedText = document.getElementById(‘speedText’),
context = canvas.getContext(‘2d’),
circleArr = [],
rValue = +rRange.value,
speedValue = +speedRange.value;
rText.value = rValue; // 赋值显示
speedText.value = speedValue;
function Circle(x, y, size, speed) {// 构造函数
this.x = x;
this.y = y;
this.size = size;
this.color = getRandomCokor();
this.X = getRandom(speed);
this.Y = getRandom(speed);
circleArr.push(this);
}

Circle.prototype.createCircle = function () { // 创建图形
context.beginPath();
context.arc(this.x, this.y, this.size, 0, 2*Math.PI);
context.fillStyle = this.color;
context.fill();
context.stroke();
this && this.move();
}

Circle.prototype.move = function () { // 移动
this.x += this.X;
this.y += this.Y;
this.r -= 1;
if(this.r <= 0){
this.delCircle();
}
}

Circle.prototype.delCircle = function () { // 删除
for (let i = circleArr.length – 1; i >= 0; i–) {
if(circleArr[i] === this){
circleArr.splice(i, 1);
}
}
}

rRange.onchange = function valueChange(e) {// 大小改变的时候重新赋值
rValue = + this.value;
rText.value = rValue;
}

speedRange.onchange = function valueChange(e) {// 速度改变的时候重新赋值
speedValue = + this.value;
speedText.value = speedValue;
}

canvas.onmousemove = function mousemove(e) {// 鼠标在 canvas 上移动
let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);
context.clearRect(0, 0, canvas.width, canvas.height);
circleArr.forEach(function(element, index) {
element.createCircle();
});
}

canvas.onmouseleave = canvas.onmousedown = function mouseDown() {
circleArr.length = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
}

正文完