资讯专栏INFORMATION COLUMN

鼠标跟随炫彩效果

yiliang / 2229人阅读

摘要:以前在网上看到了别人这个效果,感觉很酷也很难,但当真的去了解怎么做的时候会发现其实没那么难。先来看一下效果可能不是很好看啊。

以前在网上看到了别人这个效果,感觉很酷也很难,但当真的去了解怎么做的时候会发现其实没那么难。用到的就是canvas。

先来看一下效果


可能不是很好看啊。

1.先创建一个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结构

当前半径:

当前速度:

获取各个大小并赋值

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://www.ucloud.cn/yun/100968.html

相关文章

  • 不可思议的纯 CSS 实现鼠标跟随效果

    摘要:原理以上面的为例子,要使用实现鼠标跟随,最重要的一点就是如何实时监测到当前鼠标处于何处,其实很多效果,都离不开障眼法二字。 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: showImg(https://segmentfault.com/img/remote/1460000018405114); 通常而言,CSS 负责表现,JavaScr...

    sshe 评论0 收藏0
  • 不可思议的纯 CSS 实现鼠标跟随效果

    摘要:当然,本文的重点,就是介绍如何在不借助的情况下使用来模拟实现一些鼠标跟随的行为动画效果。原理以上面的为例子,要使用实现鼠标跟随,最重要的一点就是如何实时监测到当前鼠标处于何处,其实很多效果,都离不开障眼法二字。直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为...

    phpmatt 评论0 收藏0
  • CSS3:TEXT-SHADOW|BOX-SHADOW(炫彩字体)

    摘要:可为负值第个长度值阴影垂直偏移值。不允许负值设置阴影的颜色。字体微软雅黑 2016年2月26日个人博客文章--迁移到segmentfault (1)text-shadow(文本阴影) 在介绍css3:text-shadow文本阴影之前,我们先来看看用它都能实现什么效果: showImg(https://segmentfault.com/img/bV6z1P?w=300&h=136); ...

    elisa.yang 评论0 收藏0
  • CSS3:TEXT-SHADOW|BOX-SHADOW(炫彩字体)

    摘要:可为负值第个长度值阴影垂直偏移值。不允许负值设置阴影的颜色。字体微软雅黑 2016年2月26日个人博客文章--迁移到segmentfault (1)text-shadow(文本阴影) 在介绍css3:text-shadow文本阴影之前,我们先来看看用它都能实现什么效果: showImg(https://segmentfault.com/img/bV6z1P?w=300&h=136); ...

    wangzy2019 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<