# 鼠标跟随炫彩效果

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

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

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

2017-02-17
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

2017-03-27
js实现带圆角的两级导航菜单效果代码

2017-03-29
js焦点文字滚动效果代码分享

2017-03-30
javascript实现链接单选效果的方法

2017-03-23
js实现简单的可切换选项卡效果

2017-03-22
Canvas + JavaScript 制作图片粒子效果

2017-03-20
Angularjs实现搜索关键字高亮显示效果

2017-03-03
javascript实现百度地图鼠标滑动事件显示、隐藏

2017-03-22
JS实用的动画弹出层效果实例

2017-03-23