文档章节

canvas绘制经典星空连线效果

o
 osc_y8yehimr
发布于 2019/03/20 08:51
字数 1045
阅读 38
收藏 0

精选30+云产品,助力企业轻松上云!>>>

来自:https://segmentfault.com/a/1190000009675230

下面开始coding:
先写个canvas标签

<canvas height="620" width="1360" id="canvas"></canvas>

加上一些默认的样式:

*{
    margin:0;
    padding:0;
}
body{ overflow: hidden; }

这里的overflow:hidden是为了防止出现滚动条
下面开始写JS:
首先我们要得到那个 canvas 并得到绘制上下文:

var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d'); var mousePos = [0, 0]; 

紧接着我们声明两个变量,分别用于存储“星星”和边:

var nodes = [];
var edges = [];

然后我们定义一些其他的变量:

var easingFactor = 5.0;  //缓动因子
var backgroundColor = '#000'; //背景颜色 var nodeColor = '#fff'; //点颜色 var edgeColor = '#fff'; //边颜色 var pageWidth = window.innerWidth, //窗口宽度 pageHeight = window.innerHeight; //窗口高度

设置画布的大小铺满整个屏幕:

window.onresize = function () {
    canvasEl.width = pageWidth;
    canvasEl.height = pageHeight;

    if (nodes.length == 0) { constructNodes(); } render(); }; window.onresize(); 

准备工作完成,我们要开始构建点了:

function constructNodes() {
    for (var i = 0; i < 100; i++) { var node = { drivenByMouse: i == 0, x: Math.random() * canvasEl.width, y: Math.random() * canvasEl.height, vx: Math.random() * 1 - 0.5, vy: Math.random() * 1 - 0.5, radius: Math.random() > 0.9 ? 3 + Math.random() * 3 : 1 + Math.random() * 3 }; nodes.push(node); } nodes.forEach(function (e) { nodes.forEach(function (e2) { if (e == e2) { return; } var edge = { from: e, to: e2 } addEdge(edge); }); }); }

先创建100个点,每个点设置6个属性,drivenByMouse属性只有第一个点为true,其他的点为false,第一个点作为鼠标跟随点,不显示出来,可以与其他点连线。x,y作为点的初始位置,取得是画布内的随机点,vx,vy表示点的初始速度,范围为-0.5到0.5之间的随机数,radius表示点的半径,大部分的点为小的,少数的点为大的。

点都构建完毕了,就要构建点与点之间的连线了,我们用到双重遍历,把两个点捆绑成一组,放到 edges 数组中。注意这里我用了另外一个函数来完成这件事,而没有直接用 edges.push() ,为什么?

假设我们之前连接了 A、B两点,也就是外侧循环是A,内侧循环是B,那么在下一次循环中,外侧为B,内侧为A,是不是也会创建一条边呢?而实际上,这两个边除了方向不一样以外是完全一样的,这完全没有必要而且占用资源。因此我们在 addEdge 函数中进行一个判断:

function addEdge(edge) {
    var ignore = false; edges.forEach(function (e) { if (e.from == edge.from & e.to == edge.to) { ignore = true; } if (e.to == edge.from & e.from == edge.to) { ignore = true; } }); if (!ignore) { edges.push(edge); } }

至此,我们的准备工作就完毕了,下面我们要让点动起来:

function step() {
    nodes.forEach(function (e) {
        if (e.drivenByMouse) { return; } e.x += e.vx; e.y += e.vy; function clamp(min, max, value) { if (value > max) { return max; } else if (value < min) { return min; } else { return value; } } if (e.x <= 0 || e.x >= canvasEl.width) { e.vx *= -1; e.x = clamp(0, canvasEl.width, e.x) } if (e.y <= 0 || e.y >= canvasEl.height) { e.vy *= -1; e.y = clamp(0, canvasEl.height, e.y) } }); adjustNodeDrivenByMouse(); render(); window.requestAnimationFrame(step); } function adjustNodeDrivenByMouse() { nodes[0].x += (mousePos[0] - nodes[0].x) / easingFactor; nodes[0].y += (mousePos[1] - nodes[0].y) / easingFactor; } 

这段代码就是遍历粒子,并且更新其状态。根据一个简单的物理公式 s = s + v,每次执行都会 更新到点的下一步的状态。
adjustNodeDrivenByMouse函将第一个点作为鼠标的跟随点,easingFactor为缓动因子可以让点的运动比鼠标运动的稍慢一点。
然后我们要让整个粒子系统连续地运转起来就需要一个timer了,但是十分不提倡大家使用 setInterval,而是尽可能使用 requestAnimationFrame,它能保证你的帧率锁定在当前浏览器的频率下,一般为60HZ。

剩下的就是绘制了

function render() {
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); edges.forEach(function (e) { var l = lengthOfEdge(e); var threshold = canvasEl.width / 8; if (l > threshold) { return; } ctx.strokeStyle = edgeColor; ctx.lineWidth = (1.0 - l / threshold) * 2.5; ctx.globalAlpha = 1.0 - l / threshold; ctx.beginPath(); ctx.moveTo(e.from.x, e.from.y); ctx.lineTo(e.to.x, e.to.y); ctx.stroke(); }); ctx.globalAlpha = 1.0; nodes.forEach(function (e) { if (e.drivenByMouse) { return; } ctx.fillStyle = nodeColor; ctx.beginPath(); ctx.arc(e.x, e.y, e.radius, 0, 2 * Math.PI); ctx.fill(); }); } function lengthOfEdge(edge) { return Math.sqrt(Math.pow((edge.from.x - edge.to.x), 2) + Math.pow((edge.from.y - edge.to.y), 2)); } 

绘制的时候我们要判断线的长度如果大于某一个值,则不绘制该线了,如果在范围之内粗细,与颜色的透明度都与线的长度相关,点除了第一个鼠标跟随点,其他的画入即可。
最后加入鼠标移动事件,启动定时器:

window.onmousemove = function (e) {
    mousePos[0] = e.clientX; mousePos[1] = e.clientY; } window.requestAnimationFrame(step); 

大功告成!!

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Java线程池

前言 Java中对线程池的抽象是ThreadPoolExecutor类,Executors是一个工具类,内置了多种创建线程池的方法: newFixedThreadPool:固定长度线程池 newCachedThreadPool :可缓存线程池 newSin...

nullpointerxyz
23分钟前
35
0
Python笔记:用Python制作二维码

这些年,二维码在我国的日常使用频率特别大。因为其具有简单及安全性吧!除了用网络工具制作二维码,其实用JavaScript或Python也可以制作二维码,而且更有个性。 示例一(制作普通黑白二维码...

tengyulong
35分钟前
0
0
Redis-初体验/数据结构

定义: Redis 是 C 语言开发的一个开源的(遵从 BSD 协议)高性能键值对(key-value)的内存数据库,可以用作数据库、缓存、消息中间件等。它是一种 NoSQL(not-only sql,泛指非关系型数据库...

心田已荒
37分钟前
15
0
如何在保留订单的同时从列表中删除重复项? - How do you remove duplicates from a list whilst preserving order?

问题: Is there a built-in that removes duplicates from list in Python, whilst preserving order? 是否有内置的程序在保留顺序的同时从Python列表中删除重复项? I know that I can us...

fyin1314
今天
29
0
以太坊智能合约开发常见的10个安全问题

本文介绍CheckMarx安全研究小组通过扫描公开的以太坊智能合约所发现的Solidity智能合约开发中常见的十大安全问题,其中__未检查的外部调用__ 和 高成本循环 分列排行榜前两名。该安全问题排行...

区块链教程
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部