鼠标跟随炫彩效果

2019-01-13 admin

以前在网上看到了别人这个效果,感觉很酷也很难,但当真的去了解怎么做的时候会发现其实没那么难。用到的就是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);
}

先看下效果: 就是能自定义球的大小和位移大小。

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

我只在canvas大小区域内绘制图形,你可以修改在整个document上绘制图形。

[转载]原文链接:https://segmentfault.com/a/1190000017871522

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50868.html

文章标题:鼠标跟随炫彩效果

相关文章
基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考,具体如下: 1、Marquee.js文件 &#x2F;****************************************************...
2017-02-17
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快。使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留...
2017-03-29
js焦点文字滚动效果代码分享
本文实例讲述了js焦点文字滚动效果。分享给大家供大家参考。具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Mod...
2017-03-30
javascript实现链接单选效果的方法
本文实例讲述了javascript实现链接单选效果的方法。分享给大家供大家参考。具体实现方法如下: &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&...
2017-03-23
js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法。分享给大家供大家参考。具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...
2017-03-22
Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可 1:图片是通过image对象形式绘制在画布上的,然后使用...
2017-03-20
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1、每次执行搜索操作,需清空上一次结果 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键...
2017-03-03
javascript实现百度地图鼠标滑动事件显示、隐藏
其实现思路是给label设置样式,我们来看下具体做法吧 var label = new BMap.Label(&quot;我是文字标注哦&quot;,{offset:new BMap.Size(20,-10)}); label.setS...
2017-03-22
JS实用的动画弹出层效果实例
本文实例讲述了JS实用的动画弹出层效果的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Tra...
2017-03-23
回到顶部