canvas实现点线动画效果

最新推荐文章于 2025-05-01 13:18:55 发布
最新推荐文章于 2025-05-01 13:18:55 发布
阅读量5.6k 收藏 16
点赞数
分类专栏： js小游戏 文章标签： canvas 点线

效果图

在这里插入图片描述

需求分析
  • 点随机产生并向随机方向以随机的速度匀速移动
  • 未点击时，点的总数保持不变；点击时在点击的位置产生数个新的点
  • 点与点之间在一定距离内有细线连接
  • 鼠标在画面中移动时，能够与其他点产生互动

1.点的实现

由于在整个demo中需要使用到大量的点，所以使用一个Dot类来负责产生点的实例以及这个点的所有行为

var Dots = function (speed, alpha) {
    // 画布相关
    this.canvas; // canvas节点
    this.ctx; //canvas绘图上下文

    // 绘制点相关
    this.x; // 横向坐标
    this.y; // 纵向坐标
    this.r; // dot半径
    this.a = alpha && alpha > 0 && alpha <= 1 ? alpha : .8;

    // 移动相关
    this.speed = speed && speed > 0 ? speed : 2;
    this.sx; // 单位时间水平移动距离
    this.sy; // 单位时间纵向移动距离
    this.isMouseDot = 0;
};

Dot的原型链中需要有一下两个方法：init() 与 update()

Dots.prototype = {
   init: function(){...},
   update: function(){...}
}

init()

Dots实例的初始化方法，在canvas中绘制一个点，并确定这个Dots实例移动的方向与速度（由sx与sy决定，即确定sx与sy的值）

// 初始化点的方法 x/y为可选参数 为生成点的位置 不传则随机生成
    init: function (canvas, x, y, isMouseDot) {
        this.canvas = canvas;
        this.ctx = this.canvas.getContext('2d');

        this.x = x * 2 || Math.random() * this.canvas.width;
        this.y = y * 2 || Math.random() * this.canvas.height;
        this.r = Math.random() * 6; // 随机生成 <6 的半径值

        if (isMouseDot) this.isMouseDot = 1;

        // 随机确定点的移动速度与方向 速度值在 [-this.speed, this.speed) 之间 提高数值可加快速度
        this.sx = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;
        this.sy = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;
		// 绘制点
        this.ctx.beginPath(); // 开启绘制路劲
        this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
        this.ctx.fillStyle = 'rgba(255,255,255,' + this.a + ')'; // 设置填充颜色
        this.ctx.fill(); // 填充颜色
        this.ctx.closePath(); // 关闭绘制路径
    }

update()

更新dot的位置，通过不断调用其的update方法，使其产生运动的效果，并且判断dot所处的位置是否已经超出canvas的边界，若超出则调用其init()方法，使其重生在canvas内

// 更新点位置
    update: function () {
        if (this.isMouseDot) return;
        this.x = this.x + this.sx;
        this.y = this.y + this.sy;
        // 点超出canvas范围时另其"重生"
        if (this.x < 0 || this.x > this.canvas.width) {
            this.init(this.canvas);
        }
        if (this.y < 0 || this.y > this.canvas.height) {
            this.init(this.canvas);
        }
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2 * Math.PI);
        this.ctx.fillStyle = 'rgba(255,255,255,' + this.a + ')';
        this.ctx.fill();
        this.ctx.closePath();
    }

2.让点移动起来

如果让你实现一个动画，你可能会想到通过定时器setTimeout或者setInterval的方式来实现，时间设定越短动画也就越流畅，但是使用定时器会有这么几个问题出现：

当有耗时任务时，定时器任务会等待耗时任务结束，js引擎空闲时再去执行
当设定时间非常短时，可能会出现掉帧现象，产生动画不连贯的感受
那么有什么方法可以解决这个问题呢？答案是使用全局函数requestAnimFrame()

requestAnimFrame的字面意思是“请求动画帧”，作用是根据GPU的渲染频率来执行方法内的js代码，这样就不会出现上面使用定时器而导致的两个可能的问题

// dot移动效果
function animateUpdate() {
    dot.update(); // 更新dot的当前位置
    requestAnimFrame(animateUpdate);
}
requestAnimFrame(animateUpdate);

3.绘制点与点之间的连线

将产生的点存放在一个数组中，就得到了一个当前所有点实例的集合，通过for循环的嵌套，将数组中的每个点进行两两比较，当点与点之间的距离达到预先设置的临界值时，即可绘制连线

// 绘制连线
for (var i = overNum; i < dotsNum; i++) {
    for (var j = i + 1; j < dotsNum; j++) {
        var tx = dotsArr[i].x - dotsArr[j].x,
            ty = dotsArr[i].y - dotsArr[j].y,
            s = Math.sqrt(Math.pow(tx, 2) + Math.pow(ty, 2));
        if (s < dotsDistance) {//当点与点之间的距离达到预先设置的临界值时，即可绘制连线
            ctx.beginPath();//开启绘制路径
            ctx.moveTo(dotsArr[i].x, dotsArr[i].y);//设置线的起始位置
            ctx.lineTo(dotsArr[j].x, dotsArr[j].y);//设置线的结束位置
            //透明度的计算方式为，(临界值距离 - 实际距离) / 临界值距离
            ctx.strokeStyle = 'rgba(255,255,255,' + (dotsDistance - s) / dotsDistance + ')';//设置线条的绘制颜色
            ctx.strokeWidth = 1;//设置绘制线条的宽度
            ctx.stroke();//绘制
            ctx.closePath();//关闭绘制路径
        }
    }
}

4.实现鼠标交互

添加点击事件 click 事件监听器，当点击时实例化多个Dots对象，并将其添加到上文保存点的数组中，这样既可将新产生的点与原有的点产生联系。需要注意的是，产生点的位置应该为点击的位置，由于demo中的canvas是全屏显示的，所以只需要获取鼠标点的pageX / pageY，如果canvas并非全屏，则需要获取到的点产生的位置应该是相对于canvas的位置，而不能直接使用pageX / pageY， 并且需要判断是否在canvas内，如果不在则不产生新点

//鼠标事件
var clickWithNew = opts.clickWithDotsNumber || 5;
document.addEventListener('click', createDot);
function createDot(e) {
    var tx = e.pageX,
        ty = e.pageY;
    // 判断是不是在canvas内 width和height为canvas宽高
    if ((tx > 0 && tx < width) && (ty > 0 && ty < height)) {
        for (var i = 0; i < clickWithNew; i++) {
            var dot = new Dots(opts.speed, opts.dotsAlpha);
            dotsArr.push(dot);
            dotsNum += 1;
            dot.init(canvas, tx, ty); 
        } // 循环创建5个点 并添加到数组中
    }
};
canvas.addEventListener('mouseenter', mouseDotEnter);
canvas.addEventListener('mouseleave', mouseDotLeave);
function mouseDotEnter(e) {
    var tx = e.pageX,
        ty = e.pageY;
    dot.init(canvas, tx, ty, 1);
};
function mouseDotLeave(e) {
    dot.init(canvas);
}

5.如何实现鼠标在canvas中移动的交互效果？

首先添加 mousemove 的事件监听器，其他步骤与上面点击的代码相同，唯一不同的是，确定点击在canvas内后不能创建新的点。现在为Dots对象添加一个新的原型链方法mouseDot()用于更新需要跟踪鼠标移动的点的位置

// 跟踪鼠标的点的位置更新 x/y为鼠标位置
mouseDot: function (x, y) {
    this.x = x * 2;
    this.y = y * 2; // 这里的2是屏幕的devicePixelRatio 是一个全局熟悉 在retain屏幕下 devicePixelRatio=2 标识浏览器会用两个像素点去绘制原先的一个像素 这样会导致绘图不清晰
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2*Math.PI);
    this.ctx.fillStyle = "rgba(255,0,0,.8)";
    this.ctx.fill();
    this.ctx.closePath();
    }
canvas.addEventListener('mousemove', mouseDotMove);
function mouseDotMove(e) {
    var tx = e.pageX,
        ty = e.pageY;
    if ((tx > 0 && tx < width) && (ty > 0 && ty < height)) {
        dot.mouseDot(tx, ty); // 更新跟踪点的位置
    }
};

性能优化

以上就是canvas实现绚丽点线效果的基本思路啦！但是还有一个问题需要优化，刚开始不断点击的时候会不断产生点，但是当点的数量到达一定程度的时候就会发现：不管怎么点击，画面中的点的数量基本保持不变

其实在之前看到的网站上，点的数量是可以无上限增加的。但是点的数量不断增加会严重消耗性能，导致动画效果卡顿严重，无法直视，同时点太多也十分的不美观，于是demo就对这一情况做了优化：

当点的数量增加到预设的最大值时，每新增一个点，就会舍弃掉点数组中最先添加进去的点

var dotsNum = opts.dotsNumber || parseInt(area / 5000),
	maxDotsNum = dotsNum * 2,
	overNum = 0, // 超出最大数量的点的数量

// 更新点的位置 数量超出最大值时舍弃旧的点
if (dotsNum > maxDotsNum) {
   overNum = dotsNum - maxDotsNum;
}
for (var i = overNum; i < dotsNum; i++) {
   if (dotsArr[i]) dotsArr[i].update();
}

最后的代码

html

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #wonder {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: -1;
            background: url(darksky.jpg) no-repeat;
            background-size: cover;
            background-position: center center;
        }
    </style>
    <div id="wonder"></div>
    <script src="Wonder.js"></script>
    <script>
        /**
         * el {String} 元素id或class
         * dotsNumber {Int} 初始化时页面上点的数量，如不传将根据绘制面积控制点的数量
         * lineMaxLength {Int} 两点之间最大的连接线长度，默认：250
         * dotsAlpha {Float} 点的透明度，取值范围 (0,1]，默认：0.8
         * speed {Float} 点的移动速度，取值范围：大于0，默认：2
         * clickWithDotsNumber {Int} 每次点击产生的点的数量，默认：5
         */
        new Wonder({
            el: '#wonder',
            dotsNumber: 100,
            lineMaxLength: 300,
            dotsAlpha: .5,
            speed: 1.5,
            clickWithDotsNumber: 5
        })
    </script>
 <body>

js(部分省略)

var Dots = function (speed, alpha) {
 	...
};
Dots.prototype = {
    init:function(){...};
    update:function(){...};
    mouseDot:function(){...];
};
function Wonder(opts) {
    var part = document.querySelector(opts.el),
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        partStyle = window.getComputedStyle(part, null),
        width = parseInt(partStyle.width),
        height = parseInt(partStyle.height),
        area = width * height, // canvas区域面积
        cssText = 'width: ' + width + 'px; height: ' + height + 'px;';
    canvas.setAttribute('style', cssText);
    canvas.width = (width * 2).toString();
    canvas.height = (height * 2).toString();
    part.appendChild(canvas);
    var dotsArr = [],
        dotsNum = opts.dotsNumber || parseInt(area / 5000),
        maxDotsNum = dotsNum * 2,
        overNum = 0, // 超出最大数量的点的数量
        dotsDistance = opts.lineMaxLength || 250; // 点之间产生连线的最大距离
    //生成点
    for (var i = 0; i < dotsNum; i++) {
        var dot = new Dots(opts.speed, opts.dotsAlpha);
        if (i < dotsNum - 1) {
            dot.init(canvas);
        } else {
            dot.init(canvas, 0, 0, 1);
        }
        dotsArr.push(dot);
    }
    //..鼠标事件
    //动画与连线
    var requestAnimFrame = requestAnimationFrame || webkitRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame;
    requestAnimFrame(animateUpdate); // 兼容不同浏览器的requestAnimationFrame
    //dot移动效果
    function animateUpdate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空canvas中原有的内容
        // 更新点的位置 数量超出最大值时舍弃旧的点
        if (dotsNum > maxDotsNum) {
            overNum = dotsNum - maxDotsNum;
        }
        for (var i = overNum; i < dotsNum; i++) {
            // if (dotsArr[i].isMouseDot) console.log('aaa')
            if (dotsArr[i]) dotsArr[i].update();
        }
        // ...绘制连线
        requestAnimFrame(animateUpdate);
    }
}

转自：https://zhuanlan.zhihu.com/p/24771668

Canvas实现圆点动画
03-31 319
ie9 以上才支持 canvas, 其他 chrome、ff、苹果浏览器等都支持 只要浏览器兼容 canvas，那么就会支持绝大部分 api(个别最新 api 除外) 移动端的兼容情况非常理想，基本上随便使用 2d 的支持的都非常好，3d（webgl）ie11 才支持，其他都支持 如果浏览器不兼容，最好进行友好提示浏览器不兼容，可以使用_flash_等手段进行优雅降。
H5 Canvas点线图形旋转特效
07-24
本主题聚焦于"H5 Canvas点线图形旋转特效"，这是一种利用Canvas 2D渲染上下文来实现的动画效果，通过绘制点和线，并让它们以特定方式旋转，创造出引人入目的动态图形。 首先，要理解Canvas的基本绘图操作。Canvas ...
canvas画点连线
weixin_38655115的博客
07-19 2014
vue配合canvas画点连线，
HTML5 Canvas发光夜景动画特效深入解析
最新发布
weixin_35414484的博客
05-01 954
Canvas提供了两种基本的渐变类型：和。它们分别用于创建线性渐变和径向渐变。下面的代码展示了如何创建这两种渐变并应用到Canvas上。// 获取Canvas上下文// 创建线性渐变// 创建径向渐变交互设计在动画场景中的作用是创建一个吸引用户参与的环境，使得动画不仅仅是视觉上的享受，而且是互动体验的一部分。通过精心设计的交互和动画，可以显著提升用户对产品的记忆度和满意度。
【Canvas】使用canvas实现多点连线效果
qq_2511276124的博客
01-12 2016
这是一个特别简单的圆点连线canvas动画。如果你有兴趣，可以根据此基础上扩展出更好玩的互动效果，点击改变中心点，然后圆点朝点击坐标缓动等等。圆点的数据结构（可以扩展圆点样式）。移动轨迹（方向、速度）。圆点数据有变化时，要及时更新画布。可优化点：是碰撞判断逻辑、圆点数据处理、requestAnimationFrameAPI封装一个可以指定ms数更新的函数（这样圆点数据变多浏览器不会报超时警告，根据实际数据处理速度动态变化画布更新时机）。
【canvas】canvas基础使用（二）：使用canvas路径绘制点、线、面
qq_2511276124的博客
04-08 3453
学习canvas路径绘制点、线、面的api。
Canvas入门，点，线，多边形的绘制。
qq_45549336的博客
06-11 2799
一、canvas简介 Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JS操作的位图（bitmap）。Canvas 对象表示一个HTML画布元素。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作 二、Canvas基础入门 说明：看代码注释！！！看代码注释！！！看代码注释！！！ 1、使用入口 必须指定画布的id，width与height是画布宽高，不赋值时候，有默认值。 <canvas id="tutorial"
HTML5 Canvas实现点线交绘动态背景特效
7. Canvas动画实现原理：动态特效的实现与Canvas动画密切相关。动画效果一般需要借助于Canvas的上下文环境（即2D或WebGL），然后利用重绘（redraw）和清除画布（clearRect）等技术来不断刷新画布，制造出动画效果。...
创意Canvas动画实现点线连接特效
- **Canvas动画实现**: Canvas动画通常涉及到JavaScript中的setInterval函数或requestAnimationFrame方法，这些方法允许我们以固定的时间间隔来调用画布绘制函数，更新图形的位置或状态。 #### 可二次修改性 - **...
鼠标的动态轨迹——Canvas点线连接动画特效
- “动画特效代码”表明这些Canvas上的图形能够通过JavaScript进行编程，从而实现动态效果。这通常涉及到对Canvas元素的绘图上下文（context）进行操作，以及使用JavaScript中的定时器（例如`requestAnimationFrame`...
探索Canvas动画：点线连接与粒子推开效果
7. 动画循环：通过`requestAnimationFrame`来实现动画的循环播放，不断地重绘Canvas元素，从而形成动态效果。 以上就是有关“点和线连接Canvas动画”的知识点介绍。在实际开发过程中，开发者需要根据具体的需求来...
JS Canvas实现2D之点线篇
07-30
NULL 博文链接：https://taote.iteye.com/blog/842512
canvas绘制的直线动画
08-31
本文主要分享了canvas绘制的直线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
HTML5 Canvas流动线条动画特效.zip
07-04
HTML5 Canvas流动线条动画特效是一款基于Canvas画布制作的透明飘动的丝带背景动画特效。
Canvas绘制点与点相交线样式代码.zip
07-04
Canvas绘制点与点相交线样式代码是一款基于Html5 Canvas制作的动态背景特效。
canvas实现js、html连线
02-19
基于canvas实现js、html连线，可左右连线，也可上下连线，html连线，
canvas小实践动态点线
xld的博客
11-09 555
效果预览 1.实现效果 画彩色点 相近的点产生连线 点线运动，遇到边界反弹 选中点，可拖动点改变位置* 2.具体实现 初始化相关变量 var c = document.getElementById("myCanvas"); //设置canvas大小 c.height = document.body.offsetHeight; c.width = docu...
28、《每周一点canvas动画》——canvas特效插件
river、的博客
04-17 2853
很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享3款 canvas 特效插件，与其说是分享，不如说是为了方便使用，对前面章节的一些效果的封装。 1. Martrix.js GIthub地址 API | 属性 | 类型 | 默认值 | 描述 | — | cW Number 1367 canvas宽度 cH Num...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值