前言

大家好！ 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统， 然后呢？ 我自己其实也对这个比较感兴趣， 我看过很多canvas 实现的项目， 比如canvas 实现思维导图 xmind ， canvas 实现一个绘图工具。 然后呢无论是哪一个，其实背后都是在canavs 背后实现了一套事件系统，可惜这些源码都不开源。所以本着学习的激情， 我参考了一些文章实现一个简单事件系统。本篇文章你可以学到下面👇这些内容

1. 我是怎么基于canvas去构建基础框架的
2. 几何算法—— 判断点是不是任意多边形内部
3. 如何进行事件分发和阻止事件冒泡

本篇文章我全是干货。欢迎点赞、关注、收藏。

基础框架的搭建

图形类

第一步我要做的事就是进行概念抽象，大家去想一下，canvas本质是一层画布，然后画布上很多图形，有长方形、圆形、以及任意闭合的多边形. 从面向对象的角度考虑的话， 我们可以封装一个基类 —— shape 每个图形是不是都在canvas 去显示，所以都应该有一个

draw 方法， 还有一个方法就是判断鼠标的点 是不是在当前图形的内部，这个我我们后面在讨论吧。 然后每个图形有自己的特有的属性，结合canvas 的api 去设置。

export class Circle extends Shape {
  constructor(props) {
    super()
    this.props = props
  }

  draw(ctx) {
  }

  // 判断鼠标的点是否在图形内部
  isPointInClosedRegion(mouse) {
  }
}

export class Rect extends Shape {
  constructor(props) {
    super()
    this.props = props
  }
  draw(ctx) {
  }

  // 判断鼠标的点是否在图形内部
  isPointInClosedRegion(mouse) {
  }
}

上面两个图形看结构都是一样的，不一样的draw方法, 我给你1分钟时间思考🤔下，canvas 是如何画矩形和画圆的。 其实 就是两个api一个 arc一个rect 然后 你传入对应的参数就好了。这里没什么， 不知道的同学可以去MDN去看下， 我已经讲了很多篇了。我就直接给出代码：

const { center, radius, fillColor = 'black' } = this.props
const { x, y } = center
ctx.save()
ctx.beginPath()
ctx.fillStyle = fillColor
ctx.arc(x, y, radius, 0, Math.PI * 2)
ctx.fill()
ctx.closePath()
ctx.restore()

这是圆的， save 和 restore 的方法 妙处 就是 比如我给圆设置红色 ，如果我再去画矩形， 矩形也会变成红色， 这样就不可控了，圆的话就是 圆心 加 半径，加填充颜色。

看完圆的我们在看下矩形的。

const { leftTop, width, height, fillColor = 'black' } = this.props
const { x, y } = leftTop
ctx.save()
ctx.beginPath()
ctx.fillStyle = fillColor
ctx.fillRect(x, y, width, height)
ctx.closePath()
ctx.restore()

矩形的属性 一个左上角的点一个长度，一个宽度。ok ,到这里图形基本搭建完成，下面开始搭建画布类

画布类

画布类的目前做的事情非常简单哈，初始化一些属性。首先他有个add() 方法，去往画布增加各个图形。增加的图形，每一个图形内部都去实现了draw 方法。这样实现了往canvas 加图形的操作哈。直接看代码：

// 新建一个画布类
export class Canvas {
  constructor() {
    this.canvas = document.getElementById('canvas')
    this.ctx = this.canvas.getContext('2d')
    this.allShapes = []
  }

  add(shape) {
    shape.draw(this.ctx)
    this.allShapes.push(shape)
  }
}

是不是很简单，我们写一些代码测试下：

const canvas = new Canvas()
const circle = new Circle({
  center: new Point2d(50, 50),
  radius: 50,
  fillColor: 'green',
})
const rect = new Rect({
  leftTop: new Point2d(50, 50),
  width: 100,
  height: 100,
  fillColor: 'black',
})
// 添加
canvas.add(circle)
canvas.add(rect)

这样写代码是不是感觉十分的舒服， 很清除， 可读性非常的高哇

OK，看来我们写的代码是没有问题的，下面写一个稍微复杂的图形，任意点组成的闭合polygon

polygon类

同样是也是有draw 和 isPointInClosedRegion 这个两个方法， 画图的这个方法呢， 属性就是一堆2d点， 第一个点是移动画笔🖌， 其余的点调用canvas lineTo的方法。 然后 闭合区域就好了 。

export class Polygon extends Shape {
  constructor(props) {
    super()
    this.props = props
  }
  draw(ctx) {
    const { points, fillColor = 'black' } = this.props
    ctx.save()
    ctx.beginPath()
    ctx.fillStyle = fillColor
    points.forEach((point, index) => {
      const { x, y } = point
      if (index === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    })
    ctx.fill()
    ctx.closePath()
    ctx.restore()
  }

  getDispersed() {
    return this.props.points
  }

  isPointInClosedRegion(event) {
  }
}

测试的话，我是随机在画布取了5个点， 我用了我之前写的Point2d类， 上有个random方法， 传入canvas 的长度和宽度。不清楚的同学看看我之前写 canvas实现点的移动， 那里 我有详细介绍过。测试代码如下:

const points = []
for (let i = 0; i < 5; i++) {
  points.push(Point2d.random(800, 600))
}
const shape = new Polygon({
  points,
  fillColor: 'orange',
})
// 添加到画布中
canvas.add(shape)

我们看下结果：

基类shape

写到这里就有人问到， 这个三个类 都继承 基类 shape, shape 有什么通用的能力呢？ 这里开始到我们本文的主题了， 就是每个图形的是不是有监听事件， 事件有很多种类型。每个类型下肯定有一大堆的监听函数， OK ，首先这是大家通用的能力， 或者是大家都需要的额东西， 我们就把放在基类中就好了， 那么我们用什么数据结构去存储呢—— 这种key Value 一看就是用Map, 行吧我们看下代码吧：

// 图形的基类
export class Shape {
  constructor() {
    this.listenerMap = new Map()
  }
  on(eventName, listener) {
    if (this.listenerMap.has(eventName)) {
      this.listenerMap.get(eventName).push(listener)
    } else {
      this.listenerMap.set(eventName, [listener])
    }
  }
}

On 这个方法哈， 第一个参数是事件名字， 第二个参数就是listener了， OK到目前为止， 每个图形对应的事件，都有了listener。

事件分发

这个小节，就是将所有canvas 绑定的事件，传递到每个图形上去。第一步哈，我们首先为canvas 绑定监听函数。

小Tips： 为canvas 增加键盘事件的时候，需要给canvas 增加一个属性 tabinex = 0 , 不然 绑定无效。

this.canvas.addEventListener(move, this.handleEvent(move))this.canvas.addEventListener(click, this.handleEvent(click))

Move 和click 是我定义个两个常量哈：

export const move = 'mousemove'export const click = 'mousedown'

handleEvent 这个方法 用到了函数式编程， 将事件名字 和逻辑 进行解耦哇。

handleEvent = (name) => (event) => {    this.allShapes.forEach((shape) => {      // 获取当前事件的所有监听者      const listerns = shape.listenerMap.get(name)      if ( listerns ) {        listerns.forEach((listener) => listener(event))      }    })  }

这样其实就实现了事件的分发，我们来测试下：

circle.on(click, (event) => {  //event.isStopBubble = true  console.log(event, 'circle')})rect.on(click, (event) => {  console.log(event, 'rect')})

不知道大家有没有发现问题， 虽然我们实现了事件分发，但是存在一个问题，我在画布上任意一点击， 都会触发，可能其实我点击的根本不在我画的图形内部。所以我们进行事件分发的时候，还要判断下鼠标的点 是不是在闭合的区域内部。所以说呢，每一个shape 内部都要去实现 isPointInClosedRegion 这个方法。

圆的实现

判断一个点是不是在于圆内，这个其实很简单，主要去比较 鼠标的点 和圆心的距离 与 半径做比较，然后就可以判断了哈， 这个没什么。直接上代码：

const { center, radius } = this.propsreturn mouse.point.distance(center) <= radius * radius

矩形的实现

判断一个点是不是在矩形内， 这里其实有个包围盒的概念，但是矩形 本来就是方方正正的，所以第一部根据， 左上角的点，算出矩形的minX， minY, maxX,maxY 然后 去拿鼠标的点去比较就好了。 这里我给大家画个图：

看到这张图应该不用说什么了， 直接上代码：

  // 判断鼠标的点是否在图形内部  isPointInClosedRegion(mouse) {    const { x, y } = mouse.point    const { leftTop, width, height } = this.props    const { x: minX, y: minY } = leftTop    const maxX = minX + width    const maxY = minY + height    if (x >= minX && x <= maxX && y >= minY && y <= maxY) {      return true    }    return false  }

点在任意多边形内（算法）

简单的图形我们可以通过一个数学关系去比较，但是复杂的多边形呢， 多边形分为 凹多边形 和凸多边形。那我们该怎么去解决呢？社区有下面几种方法：

1. 引射线法：从目标点出发引一条射线，看这条射线和多边形所有边的交点数目。如果有奇数个交点，则说明在内部，如果有偶数个交点，则说明在外部。
2. 面积和判别法：判断目标点与多边形的每条边组成的三角形面积和是否等于该多边形，相等则在多边形内部。

具体做法：将测试点的Y坐标与多边形的每一个点进行比较，会得到一个测试点所在的行与多边形边的交点的列表。在下图的这个例子中有8条边与测试点所在的行相交，而有6条边没有相交。如果测试点的两边点的个数都是奇数个则该测试点在多边形内，否则在多边形外。在这个例子中测试点的左边有5个交点，右边有三个交点，它们都是奇数，所以点在多边形内。

这里有人会问为什么奇数是在内部， 偶数是在外部呢？

我以最简单的例子，带你去解释为什么？这时候又到了， 画图时刻：

我们先从内部选一个点，然后向任意方向发出一条射线。 你会发现一个问题，我们射线第一次与直线相交 叫做 穿入， 后面再相交 叫做穿出， 你会发现内部的最后永远是穿入，没有穿出， 但是外部的点， 永远穿入的同时， 然后穿出。最后永远是穿出

算法实现

这里涉及到一个主要的算法就是 线段 和线段求焦点。我们新建一个Seg2d的类 线段肯定是有两个端点：

export class Seg2d {  constructor(start, end) {    this.endPoints = [start, end]    this._asVector = undefined  }  get start() {    return this.endPoints[0]  }  get end() {    return this.endPoints[1]  }  reverse() {    return new Seg2d(this.end.clone(), this.start.clone())  }  clone() {    return new Seg2d(this.start.clone(), this.end.clone())  }  get asVector() {    return (      this._asVector ||      (this._asVector = new Point2d(        this.endPoints[1].x - this.endPoints[0].x,        this.endPoints[1].y - this.endPoints[0].y      ))    )  }}

这都是基本操作没什么好讲的， 主要在类上 实现了 两个静态方法

1. 多个点转成线段
2. 线段和线段相交

我先来讲第一个，因为我们我们传给任意多边形的就是 点的集合， 所以，我们得将这些点连成线段组成闭合区域。

 //一堆点 获得闭合一堆线段  static getSegments(points, closed = false) {    const list = []    for (let i = 1; i < points.length; i++) {      list.push(new Seg2d(points[i - 1], points[i]))    }    if (closed && !points[0].equal(points[points.length - 1])) {      list.push(new Seg2d(points[points.length - 1], points[0]))    }    return list  }

Closed 这个参数， 因为区域是满足一个方向的。所以闭合区域 肯定是首尾相连的。

线段和线段求焦点

1. 列方程求两个直线的焦点
2. 判断每一条线段的两个端点是否都在另一条线段的两侧, 是则求出两条线段所在直线的交点, 否则不相交.

这里我们用第二种方法去实现 ：

第一步判断两个点是否在某条线段的两侧, 通常可采用投影法:

求出线段的法线向量, 然后把点投影到法线上, 最后根据投影的位置来判断点和线段的关系. 见下图

点a和点b在线段cd法线上的投影如图所示, 这时候我们还要做一次线段cd在自己法线上的投影(选择点c或点d中的一个即可).
主要用来做参考.
图中点a投影和点b投影在点c投影的两侧, 说明线段ab的端点在线段cd的两侧.

同理, 再判断一次cd是否在线段ab两侧即可.

求法线 , 求投影 什么的听起来很复杂的样子, 皆有公式可循:

const nx=b.y - a.y,       ny=a.x - b.x;  const normalLine = {  x: nx, y: ny };  

求点c在法线上的投影位置:

const dist= normalLine.x*c.x + normalLine.y*c.y;  

注意: 这里的"投影位置"是一个标量, 表示的是到法线原点的距离, 而不是投影点的坐标.

当我们把图中 点a投影(distA),点b投影(distB),点c投影(distC) 都求出来之后, 就可以很容易的根据各自的大小判断出相对位置.

distA==distB==distC 时, 两条线段共线
distA==distB!=distC 时, 两条线段平行
distA 和 distB 在distC 同侧时, 两条线段不相交.
distA 和 distB 在distC 异侧时, 两条线段是否相交需要再判断点c点d与线段ab的关系.

这个优化 就优化在这里， 回去做一层检测， 然后再去求焦点， 求焦点用的也是固定公式。 我给出下面实现：

static lineLineIntersect(line1, line2) {    const a = line1.start    const b = line1.end    const c = line2.start    const d = line2.end    const interInfo = []    //线段ab的法线N1    const nx1 = b.y - a.y,      ny1 = a.x - b.x    //线段cd的法线N2    const nx2 = d.y - c.y,      ny2 = c.x - d.x    //两条法线做叉乘, 如果结果为0, 说明线段ab和线段cd平行或共线,不相交    const denominator = nx1 * ny2 - ny1 * nx2    if (denominator == 0) {      return interInfo    }    //在法线N2上的投影    const distC_N2 = nx2 * c.x + ny2 * c.y    const distA_N2 = nx2 * a.x + ny2 * a.y - distC_N2    const distB_N2 = nx2 * b.x + ny2 * b.y - distC_N2    // 点a投影和点b投影在点c投影同侧 (对点在线段上的情况,本例当作不相交处理);    if (distA_N2 * distB_N2 >= 0) {      return interInfo    }    //    //判断点c点d 和线段ab的关系, 原理同上    //    //在法线N1上的投影    const distA_N1 = nx1 * a.x + ny1 * a.y    const distC_N1 = nx1 * c.x + ny1 * c.y - distA_N1    const distD_N1 = nx1 * d.x + ny1 * d.y - distA_N1    if (distC_N1 * distD_N1 >= 0) {      return interInfo    }    //计算交点坐标    const fraction = distA_N2 / denominator    const dx = fraction * ny1,      dy = -fraction * nx1    interInfo.push(new Point2d(a.x + dx, a.y + dy))    return interInfo  }

这个ok 之后，我们去把任意多边形的方法的是否在闭合区域内的方法去实现。

isPointInClosedRegion(event) {    const allSegs = Seg2d.getSegments(this.getDispersed(), true)    // 选取任意一条射线    const start = event.point    const xAxias = new Point2d(1, 0).multiplyScalar(800)    const end = start.clone().add(xAxias)    const anyRaySeg = new Seg2d(start, end)    let total = 0    allSegs.forEach((item) => {      const intersetSegs = Seg2d.lineLineIntersect(item, anyRaySeg)      total += intersetSegs.length    })    // 奇数在内部    if (total % 2 === 1) {      return true    }    return false  }

任意射线，我以鼠标的点，作为起始点， 方向是X轴， 算出终点。 然后得到任意线段。去和所有线段 去求焦点。 统计焦点个数， 来确定是不是在内部。

OK， 这时候我们吧触发事件的条件改写下。

handleEvent = (name) => (event) => {    this.allShapes.forEach((shape) => {      // 获取当前事件的所有监听者      const listerns = shape.listenerMap.get(name)      if (        listerns &&        shape.isPointInClosedRegion(event)      ) {        listerns.forEach((listener) => listener(event))      }    })  }

这样其实就已经实现了，在区域内部实现事件触发了。 看下gif

一开始点击的是空白处，然后我分别点了 polygon 和 矩形 和圆形 ，看控制台 你能看到结果。说明我们的算法实现成功了。

阻止事件冒泡

这时候有同学又要问了，我点击两个图形相交的部分，我只想选中内部的， 外面的不想选中。 这是个很正常的需求，首先原生的event 肯定已经满足不了我们了， 解决这个问题就是，分发到这个图形的时候不去触发的所有listeners。不就搞定了。所以我重写了event,其实 也没什么，也就做了两件事

1. 第一件事就是将鼠标的点 转为 point2d
2. 增加一个属性isStopBubble 来阻止冒泡

代码如下：

 getNewEvent(event) {    const point = new Point2d(event.offsetX, event.offsetY)    return {      point,      isStopBubble: false,      ...event,    }  }

我这样的实现的依据是 图形的增加到场景是有序的。这里和大家说下React 事件系统， 由于有Vdom的存在，所以他将事件监听到 document 上， 然后再去按照顺序，去收集所有的lsiteners。 事件的捕获 和冒泡 其实 就是一个 顺序 和倒叙的问题。 他是这么去实现的。 他阻止合成事件冒泡， 就是合成事件有个e.stopPropagation() 。由于我们canvas 没有dom这个概念，所以我们人为封装了一个属性，并且将event传给每个图形 有他们控制 是否阻止。看代码：

handleEvent = (name) => (event) => {    event = this.getNewEvent(event)    this.allShapes.forEach((shape) => {      // 获取当前事件的所有监听者      const listerns = shape.listenerMap.get(name)      if (        listerns &&        shape.isPointInClosedRegion(event)        && !event.isStopBubble      ) {        listerns.forEach((listener) => listener(event))      }    })  }

主要是加了个条件。我们来测试下：

没阻止，我点击公共区域。

阻止冒泡， 代码如下：

circle.on(click, (event) => {  event.isStopBubble = true  console.log(event, 'circle')})rect.on(click, (event) => {  console.log(event, 'rect')})

如图：

总结

本篇文章大概就是简单的实现了canvas 的事件系统了，水平有限，能表达的就这么多。如果有更好的欢迎补充学习和交流，文章有错误的欢迎指正。我是热爱图形的Fly，我们下次再见👋啦。 最后觉得看完对你有帮助的话，点赞👍 再走吧。 知识输出不容易，我会持续持续输出高质量文章的。

资源获得

如果对你有帮助的话，可以关注公众号**【前端图形】**，回复 【事件】 可以获得全部源码。

各位同学们大家好，又到了周末写文章的时间，之前群里有粉丝提问， 就是shader不是很理解。 然后今天他就来了， 废话不多说，读完今天的这篇文章你可以学到以下几点：

1. 为什么需要有shader ? shader的作用是什么？？？？
2. shader 中的每个参数到底是什么意思？？ 怎么去用？？？

你如果会了，这篇文章你可以不用看👀，不用浪费时间，去看别的文章。 如果哪里写的有问题欢迎大家指正，我也在不断地学习当中。

why need shader

这里我结合自己的思考🤔，讲讲webgl的整个的一个渲染过程。

渲染管线

Webgl的渲染依赖底层GPU的渲染能力。所以WEBGL 渲染流程和 GPU 内部的渲染管线是相符的。

渲染管线的作用是将3D模型转换为2维图像。

在早期，渲染管线是不可编程的，叫做固定渲染管线，工作的细节流程已经固定，修改的话需要调整一些参数。

现代的 GPU 所包含的渲染管线为可编程渲染管线，可以通过编程 GLSL 着色器语言 来控制一些渲染阶段的细节。

简单来说： 就是使用shader，我们可以对画布中每个像素点做处理，然后就可以生成各种酷炫的效果了。

渲染过程

渲染过程大概经历了下面这么多过程， 因为本篇文章的重点其实是在着色器，所以我重点分析从顶点着色器—— 片元着色器的一个过程

• 顶点着色器
• 图片装配
• 光栅化
• 片元着色器
• 逐片段操作（本文不会分享此内容）
• 裁剪测试
• 多重采样操作
• 背面剔除
• 模板测试
• 深度测试
• 融合
• 缓存

顶点着色器

WebGL就是和GPU打交道，在GPU上运行的代码是一对着色器，一个是顶点着色器，另一个是片元着色器。每次调用着色程序都会先执行顶点着色器，再执行片元着色器。

一个顶点着色器的工作是生成裁剪空间坐标值，通常是以下的形式：

const vertexShaderSource = `
    attribute vec3 position; 
    void main() {
        gl_Position = vec4(position,1); 
    }
`

每个顶点调用一次（顶点）着色器，每次调用都需要设置一个特殊的全局变量 gl_Position。 该变量的值就是裁减空间坐标值。 这里有同学就问了， 什么是裁剪空间的坐标值？？？

其实我之前有讲过，我在讲一遍。

何为裁剪空间坐标？就是无论你的画布有多大，裁剪坐标的坐标范围永远是 -1 到 1 。

看下面这张图：

如果运行一次顶点着色器， 那么gl_Position 就是**（-0.5，-0.5，0，1）** 记住他永远是个 Vec4, 简单理解就是对应x、y、z、w。即使你没用其他的，也要设置默认值， 这就是所谓的 3维模型转换到我们屏幕中。

顶点着色器需要的数据，可以通过以下四种方式获得。

1. attributes 属性（从缓冲读取数据）
2. uniforms 全局变量 （一般用来对物体做整体变化、 旋转、缩放）
3. textures 纹理（从像素或者纹理获得数据）
4. varyings 变量 （将顶点着色器的变量 传给 片元着色器）

Attributes 属性

属性可以用 float, vec2, vec3, vec4, mat2, mat3 和 mat4 数据类型

所以它内建的数据类型例如vec2, vec3和 vec4分别代表两个值，三个值和四个值， 类似的还有mat2, mat3 和 mat4 分别代表 2x2, 3x3 和 4x4 矩阵。 你可以做一些运算例如常量和矢量的乘法。看几个例子吧：

vec4 a = vec4(1, 2, 3, 4);
vec4 b = a * 2.0;
// b 现在是 vec4(2, 4, 6, 8);

向量乘法 和矩阵乘法 ：

mat4 a = ???
mat4 b = ???
mat4 c = a * b;
 
vec4 v = ???
vec4 y = c * v;

它还支持矢量调制，意味者你可以交换或重复分量。

v.yyyy  ===  vec4(y, y, y,y )
v.bgra  ===  vec4(v.b,v.g,v.r,v.a)
vec4(v.rgb, 1) ===  vec4(v.r, v.g, v.b, 1) 
vec4(1) === vec4(1, 1, 1, 1)

这样你在处理图片的时候可以轻松进行 颜色通道 对调， 发现你可以实现各种各样的滤镜了。

后面的属性在下面实战中会讲解：我们接着往下走：

图元装配和光栅化

什么是图元？

描述各种图形元素的函数叫做图元，描述几何元素的称为几何图元（点，线段或多边形）。点和线是最简单的几何图元
经过顶点着色器计算之后的坐标会被组装成组合图元。

通俗解释：图元就是一个点、一条线段、或者是一个多边形。

什么是图元装配呢？

简单理解就是说将我们设置的顶点、颜色、纹理等内容组装称为一个可渲染的多边形的过程。

组装的类型取决于： 你最后绘制选择的图形类型

gl.drawArrays(gl.TRIANGLES, 0, 3)

如果是三角形的话，顶点着色器就执行三次

光栅化

什么是光栅化：

通过图元装配生成的多边形，计算像素并填充，剔除不可见的部分，剪裁掉不在可视范围内的部分。最终生成可见的带有颜色数据的图形并绘制。

光栅化流程图解：

剔除和剪裁

• 剔除：

  在日常生活中，对于不透明物体，背面对于观察者来说是不可见的。同样，在webgl中，我们也可以设定物体的背面不可见，那么在渲染过程中，就会将不可见的部分剔除，不参与绘制。节省渲染开销。

• 剪裁：

  日常生活中不论是在看电视还是观察物体，都会有一个可视范围，在可视范围之外的事物我们是看不到的。类似的，图形生成后，有的部分可能位于可视范围之外，这一部分会被剪裁掉，不参与绘制。以此来提高性能。这个就是视椎体， 在📷范围内能看到的东西，才进行绘制。

片元着色器

光珊化后，每一个像素点都包含了 颜色 、深度 、纹理数据， 这个我们叫做片元

小tips ： 每个像素的颜色由片元着色器的gl_FragColor提供

接收光栅化阶段生成的片元，在光栅化阶段中，已经计算出每个片元的颜色信息，这一阶段会将片元做逐片元挑选的操作，处理过的片元会继续向后面的阶段传递。 片元着色器运行的次数由图形有多少个片元决定的。

逐片元挑选

通过模板测试和深度测试来确定片元是否要显示，测试过程中会丢弃掉部分无用的片元内容，然后生成可绘制的二维图像绘制并显示。

• **深度测试：**就是对 z 轴的值做测试，值比较小的片元内容会覆盖值比较大的。（类似于近处的物体会遮挡远处物体）。
• **模板测试：**模拟观察者的观察行为，可以接为镜像观察。标记所有镜像中出现的片元，最后只绘制有标记的内容。

实战——绘制个三角形

在进行实战之前，我们先给你看一张图，让你能大概了解，用原生webgl生成一个三角形需要那些步骤：

我们就跟着这个流程图一步一步去操作：

初始化canvas

新建一个webgl画布

<canvas id="webgl" width="500" height="500"></canvas>

创建webgl 上下文：

const gl = document.getElementById('webgl').getContext('webgl')

创建着色器程序

着色器的程序这些代码，其实是重复的，我们还是先看下图，看下我们到底需要哪些步骤：

那我们就跟着这个流程图： 一步一步来好吧。

创建着色器

 const vertexShader = gl.createShader(gl.VERTEX_SHADER)
 const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

gl.VERTEX_SHADER 和 gl.FRAGMENT_SHADER 这两个是全局变量 分别表示顶点着色器 和片元着色器

绑定数据源

顾名思义： 数据源，也就是我们的着色器 代码。

编写着色器代码有很多种方式：

1. 用 script 标签 type notjs 这样去写
2. 模板字符串 （比较喜欢推荐这种）

我们先写顶点着色器:

const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
 `

顶点着色器 必须要有 main 函数 ，他是强类型语言， 记得加分号哇 不是js 兄弟们。 我这段着色器代码非常简单 定义一个vec4 的顶点位置， 然后传给 gl_Position

这里有小伙伴会问 ？ 这里a_position一定要这么搞？？

这里其实是这样的哇， 就是我们一般进行变量命名的时候 都会的前缀 用来区分 他是属性 还是 全局变量 还是纹理 比如这样：

uniform mat4 u_mat;

表示个矩阵，如果不这样也可以哈。 但是要专业呗，防止bug 影响。

我们接着写片元着色器：

const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
`

这个其实理解起来非常简单哈， 每个像素点的颜色 是红色 ， gl_FragColor 其实对应的是 rgba 也就是颜色的表示。

有了数据源之后开始绑定：

// 创建着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
//绑定数据源
gl.shaderSource(vertexShader, vertexShaderSource)
gl.shaderSource(fragmentShader, fragmentShaderSource)

是不是很简答哈哈哈哈，我觉得你应该会了。

后面着色器的一些操作

其实后面编译着色器、绑定着色器、连接着色器程序、使用着色器程序 都是一个api 搞定的事不多说了 直接看代码：

// 编译着色器
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)
// 创建着色器程序
const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
// 链接 并使用着色器
gl.linkProgram(program)
gl.useProgram(program)

这样我们就创建好了一个着色器程序了。

这里又有人问，我怎么知道我创建的着色器是对的还是错的呢？ 我就是很粗心的人呢？？？ 好的他来了 如何调试：

const success = gl.getProgramParameter(program, gl.LINK_STATUS)
if (success) {
  gl.useProgram(program)
  return program
}
console.error(gl.getProgramInfoLog(program), 'test---')
gl.deleteProgram(program)

getProgramParameter 这个方法用来判断 我们着色器 glsl 语言写的是不是对的， 然后你可以通过 getProgramInfoLog这个方法 类似于打 日志 去发现❌了。

数据存入缓冲区

有了着色器，现在我们差的就是数据了对吧。

上文在写顶点着色器的时候用到了Attributes属性，说明是这个变量要从缓冲中读取数据，下面我们就来把数据存入缓冲中。

首先创建一个顶点缓冲区对象（Vertex Buffer Object, VBO）

const buffer = gl.createBuffer()

gl.createBuffer()函数创建缓冲区并返回一个标识符,接下来需要为WebGL绑定这个buffer

gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

gl.bindBuffer()函数把标识符buffer设置为当前缓冲区，后面的所有的数据都会都会被放入当前缓冲区，直到bindBuffer绑定另一个当前缓冲区。

我们新建一个数组 然后并把数据存入到缓冲区中。

const data = new Float32Array([0.0, 0.0, -0.3, -0.3, 0.3, -0.3])
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)

因为JavaScript与WebGL通信必须是二进制的，不能是传统的文本格式，所以这里使用了ArrayBuffer对象将数据转化为二进制，因为顶点数据是浮点数,精度不需要太高，所以使用Float32Array就可以了，这是JavaScript与GPU之间大量实时交换数据的有效方法。

gl.STATIC_DRAW 指定数据存储区的使用方法： 缓存区的内容可能会经常使用，但是不会更改

gl.DYNAMIC_DRAW 表示 缓存区的内容经常使用，也会经常更改。

gl.STREAM_DRAW 表示缓冲区的内容可能不会经常使用

从缓冲中读取数据

GLSL着色程序的唯一输入是一个属性值a_position。 我们要做的第一件事就是从刚才创建的GLSL着色程序中找到这个属性值所在的位置。

const aposlocation = gl.getAttribLocation(program, 'a_position')

接下来我们需要告诉WebGL怎么从我们之前准备的缓冲中获取数据给着色器中的属性。 首先我们需要启用对应属性

gl.enableVertexAttribArray(aposlocation)

最后是从缓冲中读取数据绑定给被激活的aposlocation的位置

gl.vertexAttribPointer(aposlocation, 2, gl.FLOAT, false, 0, 0)

gl.vertexAttribPointer()函数有六个参数：

1. 读取的数据要绑定到哪
2. 表示每次从缓存取几个数据，也可以表示每个顶点有几个单位的数据，取值范围是1-4。这里每次取2个数据，之前vertices声明的6个数据，正好是3个顶点的二维坐标。
3. 表示数据类型，可选参数有gl.BYTE有符号的8位整数，gl.SHORT有符号的16位整数，gl.UNSIGNED_BYTE无符号的8位整数，gl.UNSIGNED_SHORT无符号的16位整数，gl.FLOAT32位IEEE标准的浮点数。
4. 表示是否应该将整数数值归一化到特定的范围，对于类型gl.FLOAT此参数无效。
5. 表示每次取数据与上次隔了多少位，0表示每次取数据连续紧挨上次数据的位置，WebGL会自己计算之间的间隔。
6. 表示首次取数据时的偏移量，必须是字节大小的倍数。0表示从头开始取。

渲染

现在着色器程序 和数据都已经ready 了， 现在就差渲染了。 渲染之前和2d canvas 一样做一个清除画布的动作：

// 清除canvas
gl.clearColor(0, 0, 0, 0)
gl.clear(gl.COLOR_BUFFER_BIT)

我们用0、0、0、0清空画布，分别对应 r, g, b, alpha （红，绿，蓝，阿尔法）值， 所以在这个例子中我们让画布变透明了。

开启绘制三角形：

gl.drawArrays(gl.TRIANGLES, 0, 3)

1. 第一个参数表示绘制的类型
2. 第二个参数表示从第几个顶点开始绘制
3. 第三个参数表示绘制多少个点，缓冲中一共6个数据，每次取2个，共3个点

绘制类型共有下列几种 看图：

这里我们看下画面是不是一个红色的三角形 ：

我们创建的数据是这样的：

画布的宽度是 500 * 500 转换出来的实际数据其实是这样的

0，0  ====>  0，0 
-0.3, -0.3 ====> 175, 325
0.3, -0.3 ====>  325, 325

矩阵的使用

有了静态的图形我们开始着色器，对三角形做一个缩放。

改写顶点着色器： 其实在顶点着色器上加一个全局变量 这就用到了 着色器的第二个属性 uniform

 const vertexShaderSource = `
  attribute vec4 a_position;
  // 添加矩阵代码
  uniform mat4 u_mat;
  void main() {
      gl_Position = u_mat * a_position;
  }
`

然后和属性一样，我们需要找到 uniform 对应的位置：

const matlocation = gl.getUniformLocation(program, 'u_mat')

然后初始化一个旋转举证：

// 初始化一个旋转矩阵。
  const mat = new Float32Array([
    Tx,  0.0, 0.0, 0.0,
    0.0,  Ty, 0.0, 0.0,
    0.0, 0.0,  Tz, 0.0,
    0.0, 0.0, 0.0, 1.0,
  ]);

Tx, Ty, Tz 对应的其实就是 x y z 轴缩放的比例。

最后一步， 将矩阵应用到着色器上， 在画之前， 这样每个点 就可以✖️ 这个缩放矩阵了 ，所以整体图形 也就进行了缩放。

gl.uniformMatrix4fv(matlocation, false, mat)

三个参数分别代表什么意思：

1. 全局变量的位置
2. 是否为转置矩阵
3. 矩阵数据

OK 我写了三角形缩放的动画：

  let Tx = 0.1 //x坐标的位置
  let Ty = 0.1 //y坐标的位置
  let Tz = 1.0 //z坐标的位置
  let Tw = 1.0 //差值
  let isOver = true
  let step = 0.08
  function run() {
    if (Tx >= 3) {
      isOver = false
    }
    if (Tx <= 0) {
      isOver = true
    }
    if (isOver) {
      Tx += step
      Ty += step
    } else {
      Tx -= step
      Ty -= step
    }
    const mat = new Float32Array([
      Tx,  0.0, 0.0, 0.0,
      0.0,  Ty, 0.0, 0.0,
      0.0, 0.0,  Tz, 0.0,
      0.0, 0.0, 0.0, 1.0,
    ]);
    gl.uniformMatrix4fv(matlocation, false, mat)
    gl.drawArrays(gl.TRIANGLES, 0, 3)

    // 使用此方法实现一个动画
    requestAnimationFrame(run)
  }

效果图如下：

最后 给大家看一下webgl 内部是怎么搞的 一张gif 动画 ：

原始的数据通过 顶点着色器 生成一系列 新的点。

变量的使用

说完矩阵了下面👇，我们开始说下着色器中的varying 这个变量 是如何和片元着色器进行联动的。

我们还是继续改造顶点着色器：

const vertexShaderSource = `
  attribute vec4 a_position;
  uniform mat4 u_mat;
  // 变量
  varying vec4 v_color;
  void main() {
      gl_Position = u_mat * a_position;
      v_color =  gl_Position * 0.5 + 0.5;
  }
`

这里有一个小知识 ， gl_Position 他的值范围是 -1 -1 但是片元着色 他是颜色 他的范围是 0 - 1 ， 所以呢这时候呢，我们就要 做一个范围转换 所以为什么要 乘 0.5 在加上 0.5 了， 希望你们明白。

改造下片元着色器：

const fragmentShaderSource = `
    precision lowp float;
    varying vec4 v_color;
    void main() {
        gl_FragColor = v_color;
    }
`

只要没一个像素点 改为由顶点着色器传过来的就好了。

我们看下这时候的三角形 变成啥样子了。

是不是变成彩色三角形了， 这里很多人就会问， 这到底是怎么形成呢， 本质是在三角形的三个顶点， 做线性插值的过程：

总结

本篇文章大概是对webgl 做了一个基本的介绍， 和带你用几个简单的小例子 带你入门了glsl 语言， 你以为webgl 就这样嘛 那你就错了，其实有一个texture 我是没有讲的， 后面我去专门写一篇文章去将纹理贴图 ， 漫反射贴图、 法线贴图。 希望你关注下我，不然找不到我了， 如果你觉得本篇文章对你有帮助的话，欢迎 点赞 、评论、收藏。 我们下期再见👋， 我是喜欢图形的Fly。

最后欢迎关注前端图形：

前言

大家好！！又到周末了，最近项目忙完了，有时间写文章了。 之前有粉丝问我， fly哥怎么实现自定义路径动画， 当时给他说的就是路径无非不就是直线 或者曲线。也就这两种， 直线的话 可以用直线方程， 曲线的话稍微复杂点 ，需要用贝塞尔曲线去做lerp。 也就是动画的每一幁得算出路径的对应的坐标就可以了。 但是这套方案学习成本太高了， 有没有一种更加简单的方式呢？ 本篇文章大概花费你5分钟， 你可以学到什么呢

1. svg 的 两个无敌api 后面介绍
2. 封装了一个自定义路径动画函数

创建Path

制作动画前，先要拿到动画的路径，对此我们可以直接使用svg的path定义规则，比如我们定义了一条较为复杂的路径（它到底长什么样大家可以自己试试，这里就不展示了），然后，我们需要将定义好的路径导入进一个新生成的path元素中（我们只是借助svg的api，因此并不需要将其插到页面内）但是为了看效果， 我还是在页面放了 svg 的图形， 毕竟直观点。

代码如下：

 <canvas id="canvas" width="800" height="600" tabindex="0"></canvas>
    <svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">

    <path d='M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z'
            fill="orange" stroke="black" stroke-width="3" />
    </svg>

我们先看下路径：

左边是canvas, 右边是svg 。等下我们注意观察小球的运动！！！！

创建svg路径

这就是创建dom节点， 然后往svg 加 path 属性。 然后继续就可以了。

 const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z';

  const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
  pathElement.setAttributeNS(null, 'd', path);
  document.body.appendChild(pathElement)

然后呢我们就有了 这个 svg 节点， 有了节点就可以做一些操作了， 这里给大家揭秘下这两个api

1. getTotalLength
2. getPointAtLength

getTotalLength

我们先看下第一个的官方解释：

**SVGPathElement.getTotalLength()** 该方法返回用户代理对路径总长度(以用户单位为单位)的计算值。

顾名思义就是会计算出，你设置svg Path 的总路径 总长度。有了总长度， 可以算出在某个长度的 x 和 y坐标呢？？

就是下面这个api

getPointAtLength

**SVGGeometryElement.getPointAtLength()** 方法沿路径返回给定距离的点。

我总觉得官方写的不够直白， 不过看 API 应该就能明白求出在某个长度的点。 有个这两个其实动画就出来了

我给大家画一个图 去模拟下：

你可以从一开始的地方，可以获得距离 起点任意长度的 点的坐标。 这样从动画的角度，你就可以在单位时间内不停地改变图形的位置，从而达成连续的效果，其实也就是动画了。 直接上代码

  const length = pathElement.getTotalLength();
  const duration = 1000; // 动画总时长
  const interval = length / duration;
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  // 定义了步数
  let step = 0; 


  function move(x, y) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(x, y, 25, 0, Math.PI*2, true);
      context.fillStyle = '#f0f';
      context.fill();
      context.closePath();
  }
  // animate()

  function  animate()  {
      if(step >  length) {
          step = 0;
      }
      const x = parseInt(pathElement.getPointAtLength(step).x);
      const y = parseInt(pathElement.getPointAtLength(step).y);
      move(x,y)
      step++
      requestAnimationFrame(animate)
  }

这里的在 requestAnimation 中不断地 去增加步数， 然后大于总长度 就让长度变为0 。 实现了循环往复。看下效果：

大家自己想象一下。 然后你就可以做任意路径的动画了，如果设计 要你做一个什么路径动画。 这时候你可以小装一波， 直接指导他。

第一步：建立工作路径

第二步：路径导出

第三步： 用AI 打开这个 路径

然后就可以导出 svg path了， 要他把这个东西给你， 你不就轻轻松松做出一个自定义动画了。 设计师肯定会夸你🐂

最后

你可以将我上面的动画封装一下，然后支持动画的缓动函数，配合path。就可以轻松驾驭了。好了 今天的分享就到这里了， 我的写作灵感 很多都来自于大家的提问！我们下期见，我是热爱图形的Fly哥。

为了让她学画画——熬夜用canvas实现了一个画板

前言

大家好，我是Fly, canvas真是个强大的东西，每天沉迷这个无法自拔， 可以做游戏，可以对图片处理，后面会给大家分享一篇，canvas实现两张图片找不同的功能， 听着是不是挺有意思的， 有点像游戏 找你妹，但是这都不是本篇文章想要表达的重点，读完今天这篇文章，你可以学到什么呢

1. Canvas 实现一个简单的画版小工具
2. Canvas 画出平滑的曲线， 这是本篇文章的重点

这时候有人问我她？？， 我的心里没有她的，只有你们coder， 下面一起学习吧，预计阅读10分钟。

canvas实现一个画版小工具

因为也比较简单，我大概说下思路：

1. 首先我对canvas 画布坚监听3个事件， 分别是mouseMove,mouseDown,mouseUp 三个事件， 同时创建了isDown 这个变量， 用来标记当前画图是不是开启
2. 当我们按下鼠标 也就是mouseDown 事件， 表示开始画笔，有一个初始的点， 并把isDown 设置为true, 然后紧着呢开始移动， 可以确定直线的端点， 然后再把直线的端点设置为下一条直线的起始点， 不断地重复这个过程, mousueUp 将isDown 这个变量设置为false, 同时清空开始点和结束点
3. 通过mouseMove事件不断采集鼠标经过的坐标点，当且仅当isDown 为true（即处于书写状态）时将当前的点通过canvas的LineTo方法与前面的点进行连接、绘制；

代码如下：

      class board {
        constructor() {
          this.canvas = document.getElementById('canvas')
          this.canvas.addEventListener('mousemove', this.move.bind(this))
          this.canvas.addEventListener('mousedown', this.down.bind(this))
          this.canvas.addEventListener('mouseup', this.up.bind(this))
          this.ctx = this.canvas.getContext('2d')
          this.startP = null
          this.endP = null
          this.isDown = false
          this.setLineStyle()
        }

        setLineStyle() {
          this.ctx.strokeStyle = 'red'
          this.ctx.lineWidth = 1
          this.ctx.lineJoin = 'round'
          this.ctx.lineCap = 'round'
        }
        move(e) {
          if (!this.isDown) {
            return
          }

          this.endP = this.getPot(e)
          this.drawLine()
          this.startP = this.endP
        }
        down(e) {
          this.isDown = true
          this.startP = this.getPot(e)
        }
        getPot(e) {
          return new Point2d(e.offsetX, e.offsetY)
        }

        drawLine() {
          if (!this.startP || !this.endP) {
            return
          }
          this.ctx.beginPath()
          this.ctx.moveTo(this.startP.x, this.startP.y)
          this.ctx.lineTo(this.endP.x, this.endP.y)
          this.ctx.stroke()
          this.ctx.closePath()
        }
        up(e) {
          this.startP = null
          this.endP = null
          this.isDown = false
        }
      }
      new board()

point2d是我自己写的一个2d点的一个类，不清楚的同学可以看我前几篇文章， 这里就不重复阐述了。我们看下gif:

细心的同学可能发现，画的线折线感比较强，出现这个本质的原因—— 就是我们画出的线其实是一个多段线polyline， 连接两个点之间的线是直线

如何画出平滑的曲线

想起曲线，就不得不提到贝塞尔曲线了，我之前的文章有系统的介绍过贝塞尔曲线，以及贝塞尔曲线方程的推导过程—— 传送门

canvas 肯定是支持贝塞尔曲线的quadraticCurveTo(cp1x, cp1y, x, y) ， 主要是一个起始点， 一个终点，一个控制点。 其实这里可以用一个巧妙的算法去解决这样的问题。

获取二阶贝塞尔曲线信息的算法

假设我们在鼠标移动的过程中有A、B、C、D、E、F、G、这6个点。如何画出平滑的曲线呢， 我们取B点和C点的中点B1 作为第一条贝塞尔曲线的终点，B点作为控制点。如图：

接下来呢 算出 cd 的中点 c1 以 B1 为起点， c点为控制点， c1为终点画出下面图形:

然后后面按照这样的步骤不断画下去，就可以获得平滑的曲线了。 理论基础我们明白了， 我们改造上面的画线的方法：

实现画出平滑的曲线

上面涉及到求两个点的中间坐标：其实两个坐标的x 和y 分别除以2： 代码如下：

getMid(p1, p2) {
  const x = (p1.x + p2.x) / 2
  const y = (p1.y + p2.y) / 2
  return new Point2d(x, y)
}

我们画出二阶贝塞尔曲线至少所示需要3个点， 所以我们需要数组去存放移动过程中所有的点的信息。

我先实现画贝塞尔曲线的方法：

drawCurve(controlP, endP) {
  this.ctx.beginPath()
  this.ctx.moveTo(this.startP.x, this.startP.y)
  this.ctx.quadraticCurveTo(controlP.x, controlP.y, endP.x, endP.y)
  this.ctx.stroke()
  this.ctx.closePath()
}

然后在修改move 中的事件

move(e) {
  if (!this.isDown) {
    return
  }
  this.endP = this.getPot(e)
  this.points.push(this.endP)
  if (this.points.length >= 3) {
    const [controlP, endP] = this.points.slice(-2)
    const middle = this.getMid(controlP, endP)
    this.drawCurve(controlP, middle)
    this.startP = middle
  }
}

这里实现永远取倒数后两个点，然后画完贝塞尔曲线后再将 这个贝塞尔的终点设置为开始点方便下次画。这样是能保证画出连续的贝塞尔曲线的。

我们看下gif 图：

总结

至此本篇文章也算是写完了， 如果你有更好的思路欢迎和我交流，我这只是粗略的表示。canvas画连续平滑的曲线重点——还是怎么去找控制点这一点非常的重要哈！下一篇文章预告： canvas的离屏渲染和webworker的使用。

前言

亲爱的coder们，我又来了，一个喜欢图形的程序员👩‍💻，前几篇文章一直都在教大家怎么画地图、画折线图、画烟花🎆，难道图形就是这样嘛，当然不是，一个很简单的问题， 如果我在canvas中画了10万个点，鼠标在画布上移动，靠近哪一个点，哪一个点高亮。有同学就说遇事不决 用for循环遍历哇，我也知道可以用循环解决哇，循环解决几百个点可以，如果是几万甚至几百万个点你还循环，你想让用户等死？这时就引入今天的主角他来了就是Rbush

rbush

我们先看下定义，这个rbush到底能帮我们解决了什么问题？

RBush是一个high-performanceJavaScript库，用于点和矩形的二维空间索引。它基于优化的R-tree数据结构，支持大容量插入。空间索引是一种用于点和矩形的特殊数据结构，允许您非常高效地执行“此边界框中的所有项目”之类的查询（例如，比在所有项目上循环快数百倍）。它最常用于地图和数据可视化。

看定义他是基于优化的R-tree数据结构，那么R-tree又是什么呢？

R-trees是用于空间访问方法的树数据结构，即用于索引多维信息，例如地理坐标、矩形或多边形。R-tree 在现实世界中的一个常见用途可能是存储空间对象，例如餐厅位置或构成典型地图的多边形：街道、建筑物、湖泊轮廓、海岸线等，然后快速找到查询的答案例如“查找我当前位置 2 公里范围内的所有博物馆”、“检索我所在位置 2 公里范围内的所有路段”（以在导航系统中显示它们）或“查找最近的加油站”（尽管不将道路进入帐户）。

R-tree的关键**是将附近的对象分组，并在树的下一个更高级别中用它们的最小边界矩形表示它们；R-tree 中的“R”代表矩形。由于所有对象都位于此边界矩形内，因此不与边界矩形相交的查询也不能与任何包含的对象相交。在叶级，每个矩形描述一个对象；在更高级别，聚合包括越来越多的对象。这也可以看作是对数据集的越来越粗略的近似。说着有点抽象，还是看一张图：

我来详细解释下这张图：

1. 首先我们假设所有数据都是二维空间下的点，我们从图中这个R8区域说起，也就是那个shape of data object。别把那一块不规则图形看成一个数据，我们把它看作是多个数据围成的一个区域。为了实现R树结构，我们用一个最小边界矩形恰好框住这个不规则区域，这样，我们就构造出了一个区域：R8。R8的特点很明显，就是正正好好框住所有在此区域中的数据。其他实线包围住的区域，如R9，R10，R12等都是同样的道理。这样一来，我们一共得到了12个最最基本的最小矩形。这些矩形都将被存储在子结点中。
2. 下一步操作就是进行高一层次的处理。我们发现R8，R9，R10三个矩形距离最为靠近，因此就可以用一个更大的矩形R3恰好框住这3个矩形。
3. 同样道理，R15，R16被R6恰好框住，R11，R12被R4恰好框住，等等。所有最基本的最小边界矩形被框入更大的矩形中之后，再次迭代，用更大的框去框住这些矩形。

算法

插入

为了插入一个对象，树从根节点递归遍历。在每一步，检查当前目录节点中的所有矩形，并使用启发式方法选择候选者，例如选择需要最少放大的矩形。搜索然后下降到这个页面，直到到达叶节点。如果叶节点已满，则必须在插入之前对其进行拆分。同样，由于穷举搜索成本太高，因此采用启发式方法将节点一分为二。将新创建的节点添加到上一层，这一层可以再次溢出，并且这些溢出可以向上传播到根节点；当这个节点也溢出时，会创建一个新的根节点并且树的高度增加。

搜索

在范围搜索中，输入是一个搜索矩形（查询框）。搜索从树的根节点开始。每个内部节点包含一组矩形和指向相应子节点的指针，每个叶节点包含空间对象的矩形（指向某个空间对象的指针可以在那里）。对于节点中的每个矩形，必须确定它是否与搜索矩形重叠。如果是，则还必须搜索相应的子节点。以递归方式进行搜索，直到遍历所有重叠节点。当到达叶节点时，将针对搜索矩形测试包含的边界框（矩形），如果它们位于搜索矩形内，则将它们的对象（如果有）放入结果集中。

读着就复杂，但是社区里肯定有大佬替我们封装好了，就不用自己再去手写了，写了写估计不一定对哈哈哈。

RBUSH 用法

用法

// as a ES module
import RBush from 'rbush';

// as a CommonJS module
const RBush = require('rbush');

创建一个树🌲

const tree = new RBush(16);

后面的16 是一个可选项，RBush 的一个可选参数定义了树节点中的最大条目数。 9（默认使用）是大多数应用程序的合理选择。 更高的值意味着更快的插入和更慢的搜索，反之亦然。

插入数据📚

const item = {
    minX: 20,
    minY: 40,
    maxX: 30,
    maxY: 50,
    foo: 'bar'
};
tree.insert(item);

删除数据📚

tree.remove(item);

默认情况下，RBush按引用移除对象。但是，您可以传递一个自定义的equals函数，以便按删除值进行比较，当您只有需要删除的对象的副本时（例如，从服务器加载），这很有用：

tree.remove(itemCopy, (a, b) => {
    return a.id === b.id;
});

删除所有数据

tree.clear();

搜索🔍

const result = tree.search({
    minX: 40,
    minY: 20,
    maxX: 80,
    maxY: 70
});

api 介绍完毕下面👇开始进入实战环节一个简单的小案例——canvas中画布搜索🔍的。

用图片填充画布

填充画布的的过程中，这里和大家介绍一个canvas点的api ——createPattern

**CanvasRenderingContext2D****.createPattern() **是 Canvas 2D API 使用指定的图像 (CanvasImageSource)创建模式的方法。 它通过repetition参数在指定的方向上重复元图像。此方法返回一个CanvasPattern对象。

第一个参数是填充画布的数据源可以是下面这：

• HTMLImageElement
• HTMLVideoElement
• HTMLCanvasElement
• CanvasRenderingContext2D,
• ImageBitmap,
• ImageData,
• Blob.

第二个参数指定如何重复图像。允许的值有：

• "repeat" (both directions),
• "repeat-x" (horizontal only),
• "repeat-y" (vertical only),
• "no-repeat" (neither).

如果为空字符串 ('') 或 null (但不是 undefined)，repetition将被当作"repeat"。

代码如下：

   class search {
      constructor() {
        this.canvas = document.getElementById('map')
        this.ctx = this.canvas.getContext('2d')
        this.tree = new RBush()
        this.fillCanvas()
      }

      fillCanvas() {
        const img = new Image()
        img.src =
          'https://ztifly.oss-cn-hangzhou.aliyuncs.com/%E6%B2%B9%E7%94%BB.jpeg'
        img.onload = () => {
          const pattern = this.ctx.createPattern(img, '')
          this.ctx.fillStyle = pattern
          this.ctx.fillRect(0, 0, 960, 600)
        }
      }
    }

这边有个小提醒的就是图片加载成功的回调里面去给画布创建模式，然后就是this 指向问题， 最后就是填充画布。

如图：

数据的生成

数据生成主要在画布的宽度 和长度的范围内随机生成10万个矩形。插入到rbush数据的格式就是有minX、maxX、minY、maxY。这个实现的思路也是非常的简单哇， minX用画布的长度Math.random minY 就是画布的高度Math.random. 然后最大再此基础上随机*20 就OK了，一个矩形就形成了。这个实现的原理就是左上和右下两个点可以形成一个矩形。代码如下：

randomRect() {  const rect = {}  rect.minX = parseInt(Math.random() * 960)  rect.maxX = rect.minX + parseInt(Math.random() * 20)  rect.minY = parseInt(Math.random() * 600)  rect.maxY = rect.minY + parseInt(Math.random() * 20)  rect.name = 'rect' + this.id  this.id += 1  return rect}

然后循环加入10万条数据：

loadItems(n = 100000) {  let items = []  for (let i = 0; i < n; i++) {    items.push(this.randomRect())  }  this.tree.load(items)}

画布填充

这里我创建一个和当前画布一抹一样的canvas，但是里面画了n个矩形，将这个画布 当做图片填充到原先的画布中。

memCanva() {  this.memCanv = document.createElement('canvas')  this.memCanv.height = 600  this.memCanv.width = 960  this.memCtx = this.memCanv.getContext('2d')  this.memCtx.strokeStyle = 'rgba(255,255,255,0.7)'}loadItems(n = 10000) {  let items = []  for (let i = 0; i < n; i++) {    const item = this.randomRect()    items.push(item)    this.memCtx.rect(      item.minX,      item.minY,      item.maxX - item.minX,      item.maxY - item.minY    )  }  this.memCtx.stroke()  this.tree.load(items)}

然后在加载数据的时候，在当前画布画了10000个矩形。这时候新建的画布有东西了，然后我们用一个drawImage api ,

这个api做了这样的一个事，就是将画布用特定资源填充，然后你可以改变位置，后面有参数可以修改，这里我就不多介绍了， 传送门

this.ctx.drawImage(this.memCanv, 0, 0)

我们看下效果：

添加交互

添加交互， 就是对画布添加mouseMove 事件， 然后呢我们以鼠标的位置，形成一个搜索的数据，然后我在统计花费的时间，然后你就会发现，这个Rbush 是真的快。代码如下：

 this.canvas.addEventListener('mousemove', this.handler.bind(this)) // mouseMove 事件 handler(e) {    this.clearRect()    const x = e.offsetX    const y = e.offsetY    this.bbox.minX = x - 20    this.bbox.maxX = x + 20    this.bbox.minY = y - 20    this.bbox.maxY = y + 20    const start = performance.now()    const res = this.tree.search(this.bbox)    this.ctx.fillStyle = this.pattern    this.ctx.strokeStyle = 'rgba(255,255,255,0.7)'    res.forEach((item) => {      this.drawRect(item)    })    this.ctx.fill()    this.res.innerHTML =      'Search Time (ms): ' + (performance.now() - start).toFixed(3)  }

这里给大家讲解一下，现在我们画布是黑白的， 然后以鼠标搜索到数据后，然后我们画出对应的矩形，这时候呢，可以将矩形的填充模式改成 pattern 模式，这样便于我们看的更加明显。fillStyle可以填充3种类型：

ctx.fillStyle = color;ctx.fillStyle = gradient;ctx.fillStyle = pattern;

分别代表的是：

OK讲解完毕， 直接gif 看在1万个矩形的搜索中Rbush的表现怎么样。

这是1万个矩形我换成10万个矩形我们在看看效果：

我们发现增加到10万个矩形，速度还是非常快的，增加到100万个矩形，canvas 已经有点画不出来了，整个页面已经卡顿了，这边涉及到canvas的性能问题，当图形的数量过多，或者数量过大的时候，fps会大幅度下降的。

总结

最后总结下：rbush 是一种空间索引搜索🔍算法，当你涉及到空间几何搜索的时候，尤其在地图场景下，因为Rbush 实现的原理是比较搜索物体的boundingBox 和已知的boundingBox 求交集， 如果不相交，那么在树的遍历过程中就已经过滤掉了。最后文章写作不易，如果有错误的话欢迎指正。如果看了对你有帮助的话，希望你能为我点个关注 和👍， 这是对我最大的支持！

学习交流

搜索公众号【前端图形】，后台回复"加群"二字， 就可以加入可视化学习交流群哦！ 一起学习吧！

参考文献

深入理解空间算法

R树详细解释

维基百科-R树的介绍

Alex2wong

之前在群里一直有粉丝对我做的3d文字感兴趣，今天它来了，我是如何去做的。本篇文章可能不会讲太多代码层面的东西，主要是一个技术方案从选型到最终实现中的遇到的一些问题。 主要是结合自己项目做的一些思考。希望能对你有所帮助，或者是开阔眼界。

three.js如何去展示中文字体

首先three.js原生有个textGeometry, 原生是支持的，但是你如果想支持各种中文字体，首先你需要一个下载字体的ttf文件。然后你就去一个网站叫做， http://gero3.github.io/facetype.js/ 。 你把你的ttf文件上传，然后将这些字体转成json, 再用three.js 自带的fontLoader 去解析这个json, 配合textGeometry 你就可以实现了。我这里做了一个简单的实现：

const loader = new THREE.FontLoader()
loader.load('../json/alibaba.json', (font) => {
  const geometry = new THREE.TextGeometry('我爱掘金', {
    font: font,
    size: 20,
    height: 5,
    curveSegments: 12,
    bevelEnabled: false,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5,
  })
  const material = new THREE.MeshBasicMaterial({ color: 0x50ff22 })
  const mesh = new THREE.Mesh(geometry, material)
  this.scene.add(mesh)
})

给大家看下gif效果图：

其实不同的字体，对应不同的加载json,至于字体加粗，其实就是看字体有没有加粗的类型，如果有加粗的类型， 你就去展示就好了，其实还是不同的json, 我们这次的3D文字其实是没有采用这个three 这一套的。

3d文字技术选型

首先第一点不满足的就是我们的造型， 我们是做家居的，我们不光有3D视图展示，还有2D视图展示，所以就是一套数据分别在3D和2D都有对应的表达。看下面两张图：

对吧，所以这是我当时去做技术评估不去考虑的最重要问题， 我们2D所有的数据都是用SVG去展示。所以说当时第一时间思考🤔，有没有一个库是可以支持解析字体文件转成svg的，功夫不负有心人哇，终于找到去npm找到了一个叫opentype.js 我们看下这个库的介绍：

opentype.js is a JavaScript parser and writer for TrueType and OpenType fonts.

It gives you access to the letterforms of text from the browser or Node.js. See https://opentype.js.org/ for a live demo.

其实他的特性总结下来有下面：

1. 非常高效
2. 支持跑在浏览器和nodejs 中

其实当时我找到了很多社区方案， 有一个叫text-to-svg这个库， 看名字好像很满足我们的要求， 但是本着学习的本质，我只喜欢看源码，看看他到底用了啥，结果发现他是基于上面opentype.js 这个库去做了封装，那我肯定不用它了。 我只需要字体被转换出来的svg信息，其实选用opentype.js 这个库还有两个原因哈**，第一支持ts ,第二的话他的周下载量是十分高的，至少说明他是稳定的。**

2d

有了opentype.js的加成，我们可以把输入的文字变成了转成svg的信息，这里主要用的一个api就是loadFont，然后就可以根据我们输入的文字，然后生成对应的svg， 我下面写一些伪代码：

async function make() {
  const font = await opentype.load(
          'https://backend-public-asset-alpha.oss-cn-shanghai.aliyuncs.com/resources/website/font/11c302dd8c50619e4131da5d645fb422.otf'
        )
  const map = new Map()
  return function (text) {
    // 防止重复添加
    for (let i = 0; i < text.length - 1; i++) {
      const parseFont = font.getPath(text[i], 0, 150, 72)
      const char = text[i]
      console.log(text[i], '999')
      if (!map.has(char)) {
        map.set(text[i], parseFont.commands)
      }
    }
    return map
  }
}

然后输入任何文字会产生，一些SVGpath 信息。我们看下2 这个svgpath信息。然后你可以看下：

M其实对应的就是画布移动， L 就是画直线， C就是三阶贝塞尔曲线， Z 就是闭合path。 svg的path 信息有了， 这里第一个难点出来了

贝塞尔曲线的离散

因为我们2d 可以用贝塞尔曲线去表达，但是我们3D的dataModel 中是没有这个数据去表示的，所以说什么呢，我得想好一个替代方案， 这里其实就设计到一个离散， 就是我将贝塞尔曲线，离散成多个点， 然后用直线去表达。这里不清楚的话，可以看我之前的一篇文章， 我里面对贝塞尔曲线做了详情讲解： 面试官问我会canvas? 我可以绘制一个烟花🎇动画

所以我将这些数组信息，去都转成2d点，去存储， 然后到这里很多人以为结束了，然后把这些2D线段去转成3D线段，你以为这样就结束了？

单一文字分组

我也以为事情就这么简单，直到我打了个 e，才发现事情并没有辣么简单。我们看下他的svg信息。

好家伙不仔细一看，原来有两个闭合路径，为什么会有这样呢？ 我这里给大家画个图 就知道了。

蓝色的其实对应的是第一个path 我们称作Outer, 红色其实对应的是内部。然后我就自然而然去思考了， 我去对数组进行分类。 主要是根据闭合曲线的Z 去分组， 也就是一个字分成多个数据。

射线检测法

这里的话很多人以为结束了，但是其实并没有。这里涉及到射线检测法。 算出一个文字每一个对应的order ,大概是由【true, false..】组成的数组。 false 表示逆时针， true表示 顺时针。 射线检测法的目的， 其实去判断这个path 和其他path 有没有交点， 交点为奇数其实就是逆时针， 为偶数其实就是顺时针。

射线检测法： 其实就是取每个path 的第一个点在X轴方向上发出射线，然后算出与其他path 的交点个数，这里我不细讲了， 感兴趣的可以看我这篇文章 canvas 实现事件系统

至于为什么要去判断顺序， 与我们用的算法库clipper 有关系。有外轮廓和内轮廓之分， 内轮廓我们一般叫做洞也就是hole， 为了让大家有简单的概念， 我还是画图去表示：我就以回这个字举例子：

首先回这个字是也就是有两个path, 第二个path 肯定是内轮廓 也就是顺序肯定是【false,true】

我们先看下正确✅的图形：

注意方向：外轮廓是逆时针， 内轮廓是顺时针

看下都是顺序是【true,true】的图形是这样的：

顺序错误会导致，区域都会填充。 所以为什么要有顺序了相信你也就明白了。 看下一个复杂的字吧感受下**文字的博大精深。圗 和国

生成几何体

我们现在其实只是一个平面图形，文字肯定是个立方体， 这里 其实主要是生成顶面和侧面， 顶面的话其实就是通过底面上的点， 在底面的法向量延长一定距离。侧面的话，其实还是底面的点和顶面对应的点连起来的一条直线， 然后形成侧面。 我还是画图：

每一个侧面大概是这样的一个过程。虚线就是对应点的连线，然后形成侧面。这个过程看着十分简单，其实在去写的时候还是十分复杂的。

交互层的思考🤔

交互层面的思考主要是三维空间中矩阵的应用。我们主要讲下这几点：

1. 2d 坐标转换到3d坐标
2. 垂直、水平、偏移、缩放
3. 吸附

2d——3d

这里的话是这样的生成的svg 信息比如说他的开始点， 并不是在原点，但是我转到3d的世界坐标系，肯定默认是在原点的。所以的话，这里算出输入的字体的所有2d的信息，都要做一个偏移Matrix,因为在画布中移动，也就是文字跟着鼠标的点移动， 鼠标在哪里然后文字就在那里。这时候的移动Matrix 是相对世界原点的。所以这一层转换是非常重要的，而且还有一个非常值得注意的点是： svg 和canvas 的坐标系是在左上角的，也就是转到3d下来Y轴是要取反。 我还是画图表示下哈：

垂直、水平、偏移、缩放

其实是这样的， 当你输入一行字默认是水平的，但是有需求我想把他搞成垂直的。 这里就是对应的就是在X轴偏移和 Y轴偏移的问题。 openType 默认是 可以批量解析字体的，但是呢我们不采用， 我还是一个个文字去处理，做到可控制。问题来了，每一个文字之间的间距， 怎么确保他们不相交呢？ 其实这里又涉及到计算每一个文字的boundingBox， 算出boundingBox之后呢，然后做一个距离叠加， 类似于reduce。因为输入的字有很多越往后面， 距离越大呗。 缩放的话，其实是这样的，根据现有字体的大小 除上 基础字体大小 比如是20 算出一个scale， scale 可以算出缩放矩阵。物体字体大小变大， 然后✖️ 缩放矩阵。 那么bounding box 自然也变化了。 整个一流程就是这样的：

虚线框可以想象成每个矩形的bouding, 就是每个字， 每个字变化了， 矩形变化，想在 X轴 就在X轴，想在Y轴 就在Y轴。

吸附

吸附这东西其实没有啥悬乎的东西：

1. 面对照相机📷
2. 算旋转矩阵

总结下来就这两个东西。 这里因为文字默认加载到的是相对于 世界坐标系的原点的， 比如你想吸附三维空间中的任意平面。 所以说你可以基于这个平面建立一个局部坐标系，其实本质上就是世界坐标系 —— 局部坐标系的转换， 吸附到任意平面本质上，你可以只可以获得一个平面的法向量， 至少2个轴去确定一个局部坐标系， 这里默认选取X轴的正方向， 这样。这里 用到了three.js 的一个方法叫做lookat, 其实也就是模拟相机去算出这个矩阵。

参数就是个vector

vector - 一个表示世界空间中位置的向量。

也可以使用世界空间中x、y和z的位置分量。

旋转物体使其在世界空间中面朝一个点。

由于还要让文字始终面对照相机📷 ，所以要计算照相机的方向 和平面的法向量去做点乘，来判断其他轴是否反向。大概就是这样：

我们看下gif：

总结

本期的分享到此结束，如果你举得我哪里有写的不对的地方，欢迎评论区交流指正，如果想试玩的话， 可以百度搜索🔍红星设计云，https://www.mshejiyun.com/ 里面有很多好玩的工具。我是喜欢图形的Fly,我们下次再见👋拉， 如果有收获，别忘了点赞收藏加关注。

关注我的公众号 前端图形，获取更多好玩与有趣的图形知识。如果你也一样对技术热爱，喜欢图形和数据可视化📚并且为之着迷,欢迎加我个人微信（wzf582344150），将会邀请你加入我们的可视化交流学习群一起面向快乐编程~ 🦄。
我是Fly，在这个互联网技术疯狂快速迭代的时代中,很高兴能和你一起变强！😉

这是我参与更文挑战的第6天，活动详情查看： 更文挑战

前言

在我们日常开发中贝塞尔曲线无处不在：

1. svg 中的曲线（支持 2阶、 3阶）
2. canvas 中绘制贝塞尔曲线
3. 几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线

所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG

绘制贝塞尔曲线

第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。

const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.moveTo(100,100)
ctx.quadraticCurveTo(180,50, 200,200)
ctx.stroke();

这样我们就画好了一个贝塞尔曲线了。

绘制贝塞尔曲线动画

画一条线谁不会哇？接下来文章的主体内容。 首先试想一下动画我们肯定一步步画出曲线？ 但是这个ctx给我们全部画出来了是不是有点问题。我们重新看下二阶贝塞尔曲线的实现过程动画，看看是否有思路。

从图中可以分析得出贝塞尔上的曲线是和t有关系的， t的区间是在0-1之间，我们是不是可以通过二阶贝塞尔的曲线方程去算出每一个点呢，这个专业术语叫离散化，但是这样的得出来的点的信息是不太准的，我们先这样实现。

先看下方程：

我们模拟写出代码如如下：

//这个就是二阶贝塞尔曲线方程
function twoBezizer(p0, p1, p2, t) {
  const k = 1 - t
  return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2
}

//离散
function drawWithDiscrete(ctx, start, control, end,percent) {
    for ( let t = 0; t <= percent / 100; t += 0.01 ) {
        const x = twoBezizer(start[0], control[0], end[0], t)
        const y = twoBezizer(start[1], control[1], end[1], t)
        ctx.lineTo(x, y)
    }
}

我们看下效果：

和我们画的几乎是一模一样，接下啦就用requestAnimationFrame 开始我们的动画给出以下代码：

let percent = 0
function animate() {
    ctx.clearRect( 0, 0, 800, 800 );
    ctx.beginPath();
    ctx.moveTo(100,100)
    drawWithDiscrete(ctx,[100,100],[180,50],[200,200],percent)
    ctx.stroke();
    percent = ( percent + 1 ) % 100;
    id =  requestAnimationFrame(animate)
}
animate()

这里有两个要注意的是， 我是是percent 不断加1 和100 求余，所以呢 percent 会不断地从1-100 这样往复，OK所以我们必须要动画之前做一次区域清理， ctx.clearRect( 0, 0, 800, 800 ); 这样就可以不断的从开始到结束循环往复，我们看下效果：

看着样子是不是还不错哈哈哈😸。

绘制贝塞尔曲线动画方法2

你以为这样就结束了？ 当然不是难道我们真的没有办法画出某一个t的贝塞尔曲线了？ 当前不是，这里放一下二阶贝塞尔方程的推导过程：

二阶贝塞尔曲线上的任意一点，都是可以通过同样比例获得。 在两点之间的任意一点，其实满足的一阶贝塞尔曲线， 一阶贝塞尔曲线满足的其实是线性变化。我给出以下方程

 function oneBezizer(p0,p1,t) {
      return p0 + (p1-p0) * t
  }

从我画的图可以看出，我们只要 不断求A点 和C点就可以画出在某一时间段的贝塞尔了。

我给出以下代码和效果图：

function drawWithDiscrete2(ctx, start, control, end,percent) {
    const t = percent/ 100;
    // 求出A点
    const A = [];
    const C = [];
    A[0] = oneBezizer(start[0],control[0],t);
    A[1] = oneBezizer(start[1],control[1],t);
    C[0] = twoBezizer(start[0], control[0], end[0], t)
    C[1] = twoBezizer(start[1], control[1], end[1], t)
    ctx.quadraticCurveTo( 
        A[ 0 ], A [ 1 ],
        C[ 0 ], C[ 1 ]
    );
}

礼花🎉动画

上文我们实现了一条贝塞尔线，我们将这条贝塞尔的曲线的开始点作为一个圆的圆心，然后按照某个次数求出不同的结束点。 再写一个随机颜色，礼花效果就成了， 直接上代码，

for(let i=0; i<count; i++) {
    const angle = Math.PI * 2 / count * i;
    const x = center[ 0 ] + radius * Math.sin( angle );
    const y = center[ 1 ] + radius * Math.cos( angle );
    ctx.strokeStyle = colors[ i ];
    ctx.beginPath();
    drawWithDiscrete(ctx, center,[180,50],[x,y],percent)
    ctx.stroke();
}

function getRandomColor(colors, count) {
    // 生成随机颜色
    for ( let i = 0; i < count; i++ )  {
        colors.push( 
          'rgb( ' + 
            ( Math.random() * 255 >> 0 ) + ',' +
            ( Math.random() * 255 >> 0 ) + ',' + 
            ( Math.random() * 255 >> 0 ) + 
          ' )'
        );
    }
}

我们看下动画吧：

结尾

本篇文章到这里就结束了，如果看了对你有帮助的， 欢迎点个赞👍和关注。 你的支持是我持续更新的最大动力。 所有代码都在我的github上。最后祝大家端午节快乐！

大家好！我是Fly哥，最近做了很多粒子动画， 对canvas 实现粒子动画有了一点小感悟，前几天北方都下雪了， 身在魔都的我们， 一点点雪的影子都没有。而下雪动画作为粒子动画中我觉得算是比较简单的好理解， 先把这篇文章讲完，后面再去给大家讲 酷炫的 canvas 文字烟花动画。 本篇文章大概阅读花费7分钟， 你可以学到如何去实现一个粒子动画，我觉得把思路学会了， 后面产品假设提任何需求你都是可以cover 住的。 废话不多说, 直接先看先看效果：

看着是不是像辣么回事，哈哈哈哈， fly哥写的基础版，圣诞节快到了，你可以再我的基础上做下面👇🏻几个优化

1. 使用雪花贴图
2. 为每一个粒子增加重力效果
3. 性能优化的角度考虑下，考虑使用离屏canvas(数量比较多的情况下，可以去使用)

粒子动画

可能有的人到现在还不是很清楚啥是粒子动画：

粒子

粒子是什么？粒子是一种微小的物体，比如像我们周边环境中的雪花，火星等物体。因此在游戏中一般都用粒子特效来模拟咱们现实生活中的许多自然现象。

粒子系统

粒子系统是众多粒子的集合。一般具有具有粒子的更新，显示，销毁及其创建粒子等性质。不同的粒子系统具有不同的粒子行为，所以所具有的性质会略有区别。

综合

粒子动画其实很容易理解了，就是很多个粒子按照某个特定的运动轨迹组合起来的动画，所以做粒子类属性 会带有一些物理属性， 比如重力，风的阻力， 加速度。。。 这些东西，其实主要为了更加贴近自然，更加真实。物理比较差的同学记得把物理知识补一下。

雪粒子

简单介绍上面的概念后，大家可以结合上面的动画简单分析一下，雪粒子这个类应该有哪些属性呢？？？

首先我雪是用ctx.arc 去画的，所以呢？？ 肯定有 x 和 y 轴 坐标 ，还有 radius 半径

这时候有同学开始抢答了？说fly哥，你上面提到了粒子的速度， 雪花肯定每一个下的速度不一样， 肯定有一个 vx, vy

哎呦不错哦， 现在已经5个属性了， 还有没有属性呢， 这时候有个细心的妹子站出来了， 我看到了透明度的变化，确实 还是妹子细心哇！！

大家在思考下， 还有没有什么属性呢？ 看着同学们雅雀无声， 我给一个提醒， 如何保持雪一直下，难道我要不断添加粒子嘛， 有没有边界啥的？？

有同学就说：不亏是fly哥，思考问题就是全面哇，哈哈哈哈其实这里涉及到 就一个属性 边界检测呗， 不过没辣么夸张， 就是是一个最大距离 maxDistance, 如果超过了 最大距离 我们就让它从一开始落呗， 不就实现了永动机的效果！

编码实现

理论说的都差不多了，我这里写的都是伪代码，本着 授人以鱼不如授人以渔 的目的， 你如果真的想学， 跟着我的思路做一篇肯定很没问题！

创建canvas

创建canvas 拿到canvas 的上下文 这个应该不用多讲了

  const canvas = document.getElementById( 'canvas' );
  const ctx = canvas.getContext( '2d' );

创建snow 类

主要是每一个小的雪花粒子：

class Snow {
  dia: number
  fill: string
  vy: number
  vx: number
  z: number
  y: number
  x: number
  maxDistance: number
  width: number
  height: number

  constructor(width: number, height: number, maxDistance: number) {
    this.x = Math.random() * (width + maxDistance) - maxDistance / 2
    this.y = Math.random() * (height + maxDistance) - maxDistance / 2
    this.maxDistance = maxDistance
    this.width = width
    this.height = height
    this.z = Math.random() * 0.5 + 0.5
    this.vx = (Math.random() * 2 - 0.5) * this.z
    this.vy = (Math.random() * 1.5 + 1.5) * this.z
    this.fill = 'rgba(255,255,255,' + (0.5 * Math.random() + 0.5) + ')'
    this.dia = (Math.random() * 2.5 + 1.5) * this.z
  }

  draw(ctx: CanvasRenderingContext2D) {
    ctx.beginPath()
    ctx.strokeStyle = 'transparent'
    ctx.fillStyle = this.fill
    ctx.arc(this.x, this.y, this.dia, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.stroke()
    ctx.fill()
    return this
  }

  update() {
    this.x += this.vx
    this.y += this.vy
    if (this.x > this.width + this.maxDistance / 2) {
      this.x = -(this.maxDistance / 2)
    } else if (this.x < -(this.maxDistance / 2)) {
      this.x = this.width + this.maxDistance / 2
    }
    if (this.y > this.height + this.maxDistance / 2) {
      this.y = -(this.maxDistance / 2)
    } else if (this.y < -(this.maxDistance / 2)) {
      this.y = this.height + this.maxDistance / 2
    }
  }
}

这里面 把上面的所说的属性 都讲到了， 其实无论你做任何粒子， 他都有一个创建 和 更新 ，因为你是做动画，

比如第一帧画面 是没有雪花粒子的， 所以第一帧 就是创建粒子，然后后面每一帧其实就是改变粒子的位置 就好了，不断重复这样的过程 配合 requestanimation 去实现。 后面每一帧 就是更新 update 函数，

我这里还是解释下： 粒子不断加 一个固定的速度 vx vy ，然后做了边界判断 ， 你可以自己去修改的。 由于 有不同的粒子， 粒子的大小 透明度 、速度 都是不同的， 所以 使用了random

动画实现

动画实现 很简单 就两步骤

1. 创建粒子
2. 更新粒子

// 第一帧 创建1000 个
for (let i = 0; i < 1000; i++) {
  points.push(new Snow(100, 100, 100))
}
// 后面都是更新
 ctx.clearRect(0, 0, view.width, view.height)
 ctx.fillStyle = 'rgba(0,128,255,1)'
 ctx.fillRect(0, 0, view.width, view.height)
 // 调用每个粒子的更新 函数
 points.forEach((point) => {
    point.draw(ctx).update()
 })

源码获得

如果还是有同学还是要看源码的， 直接关注公众号，私信我就好了！！

总结

很感谢你能看到这里，如果觉得写的不错， 帮我点个赞和在看，让更多同学看到， 如果有任何问题欢迎直接私信我。多交流，多学习。欢迎**「长按图片 加 Fly 为好友」**，我会精选优质数据可视化、游戏、图形相关好文、还有各种大厂面试文章等等，立志做一个有温度的公众号。

围观fly哥朋友圈👬🏻

2021陪你一起度过！

回复思维导图 免费获取20G 前端数据可视化学习资料！

回复 加群 拉你进可视化交流技术群，一起吹水，长期学习交流2021陪你一起度过！

回复面试 获得一线大厂相关面经文章

前言

终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么

1. 对于three.js 这个框架有一个简单的理解，可以入门下。
2. 学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。
3. 我用一个简单的实例 带大家用three实现简单的可视化地球案例 。

3d框架的选择——three.js

1.为什么选择three.js

​ 官网对 Threejs 的介绍非常简单：“Javascript 3D library”。openGL 是一个跨平台3D/2D的绘图标准，WebGL 则是openGL 在浏览器上的一个实现。web前端开发人员可以直接用WebGL 接口进行编程，但 WebGL 只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。Threejs 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。总结来一句话： 就是你不懂计算机图形学，只要理解了three.js的一些基本概念你可以。

Threejs 的基本要素——场景

定义如下：

场景：是一个三维空间，所有物品的容器，可以把场景想象成一个空房间，接下来我们会往房间里放要呈现的物体、相机、光源等。

用代码表示就是如下：

const scene = new THREE.Scene();

你就把他想象成一个房间，然后你可以往里面去添加一些物体，加一个正方体哈，加矩形，什么都可以。其实three.js 整个之间的关系是一个 树形结构。

Threejs 的基本要素——相机📷

相机：Threejs必须要往场景中添加一个相机，相机用来确定位置、方向、角度，相机看到的内容就是我们最总在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向和角度。

three.js 中的相机分为两种一种是正交相机📷 和透视相机📷，接下来我给大家一一介绍，但是理解照相机的情况下，你要先理解一个概念——视椎体

透视相机

视锥体是摄像机可见的空间，看上去像截掉顶部的金字塔。视锥体由6个裁剪面围成，构成视锥体的4个侧面称为上左下右面，分别对应屏幕的四个边界。为了防止物体离摄像机过近，设置近切面，同时为了防止物体离摄像机太远而不可见，设置远切面。

oc 就是照相机的位置， 近平面、和远平面图中已经标注。从图中可以看出，棱台组成的6个面之内的东西，是可以被看到的。 影响透视照相机的大小因素：

1. 摄像机视锥体垂直视野角度 也就是图中的a
2. 摄像机视锥体近端面 也就是图中的 near plane
3. 摄像机视锥体远端面 也就是图中的far plane
4. 摄像机视锥体长宽比 表示输出图像的宽和高之比

对应的three 中的照相机：

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

​ 透视相机最大的特点：就是符合我们人眼观察事物的特点， 近大远小。

近大远小的背后的实现原理就是相机会有一个投影矩阵: 投影矩阵的做的事情很简单，就是把视椎体转换成一个正方体。 所以远截面的点就要缩小， 近距离的反而放大。

正交相机

正交相机的特点就是视椎体的是一个立方体

在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。

这对于渲染2D场景或者UI元素是非常有用的。如图：

three中代码如下：

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

说完相机就要介绍下图形的组成形式了。

Threejs 的基本要素——网格

在计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。当线段数量越多，长度就越短，当达到你无法察觉这是线段时，一条平滑的弧线就出现了。 计算机的三维模型也是类似的。只不过线段变成了平面，普遍用三角形组成的网格来描述。我们把这种模型称之为 Mesh 模型。

一条弧线由多条线段得到，线段的数量越多，越接近弧线。 不懂的小伙伴，可以看下我的这篇文章：面试官问我会canvas? 我可以绘制一个烟花🎇动画里面贝塞尔曲线可以是用一段段小线段去拟合起来的 。

three.js 背后所有的图形在进行渲染之前， 都会进行三角化， 然后交给webgl 去渲染。

Threejs提供了一些常见的几何形状，有三维的也有二维的，三维的比如长方体、球体等，二维的比如长方形圆形等，如果默认提供的形状不能满足需求，也可以自定义通过定义顶点和顶点之间的连线绘制自定义几何形状，更复杂的模型还可以用建模软件建模后导入。

2d

3d

有了形状，可能渲染出来的图形没有美丽的样子，这时候材质就出来了。 组成的mesh其实是有两个部分：

材质(Material)+几何体(Geometry)就是一个 mesh，Threejs提供了集中比较有代表性的材质，常用的用漫反射、镜面反射两种材质，还可以引入外部图片，贴到物体表面，成为纹理贴图。大家有兴趣可以自己去试一下。如图：

Threejs 的基本要素——灯光

假如没有光，摄像机看不到任何东西，因此需要往场景添加光源，为了跟真实世界更加接近，Threejs支持模拟不同光源，展现不同光照效果，有点光源、平行光、聚光灯、环境光等。

AmbientLight(环境光)

环境光会均匀的照亮场景中的所有物体，环境光不能用来投射阴影，因为它没有方向。

const light = new THREE.AmbientLight( 0x404040 ); // soft white light

平行光（DirectionalLight）

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );

点光源（PointLight）

从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。

const light = new THREE.PointLight( 0xff0000, 1, 100 );

聚光灯（SpotLight）

光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。

const spotLight = new THREE.SpotLight( 0xffffff );

还有一些其他的灯光，感兴趣的小伙伴可以自行去three.js 官网查看。

Threejs 的基本要素——渲染器

渲染器就是去渲染你场景中灯光、相机、网格哇。

let renderer = new THREE.WebGLRenderer({
    antialias: true, // true/false表示是否开启反锯齿
    alpha: true, // true/false 表示是否可以设置背景色透明
    precision: 'highp', // highp/mediump/lowp 表示着色精度选择
    premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分率）
    preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
    maxLights: 3, // 最大灯光数
    stencil: false // false/true 表示是否使用模板字体或图案

three.js大体的一些要素我都介绍过了，接下面就进入在正题了，three.js 如何实现一个可视化地图呢？

可视化地图——three.js实现

场景的搭建

我先不管地图不地图的，地图的这些形状肯定是放置到场景中的。跟着我的脚步一步一步去搭建一个场景。场景的搭建就照相机，渲染器。我用一个map类来表示代码如下：

class chinaMap {
    constructor() {
      this.init()
    }

    init() {
      // 第一步新建一个场景
      this.scene = new THREE.Scene()
      this.setCamera()
      this.setRenderer()
    }

    // 新建透视相机
    setCamera() {
      // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      )
    }

    // 设置渲染器
    setRenderer() {
      this.renderer = new THREE.WebGLRenderer()
      // 设置画布的大小
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      //这里 其实就是canvas 画布  renderer.domElement
      document.body.appendChild(this.renderer.domElement)
    }
    
    // 设置环境光
    setLight() {
      this.ambientLight = new THREE.AmbientLight(0xffffff) // 环境光
      this.scene.add(ambientLight)
    }
  }

上面我做了一一的解释，现在场景有了，灯光也有了， 我们看下样子。

对场景黑乎乎的什么都没有， 接下来我们我随便随便加一个长方体并且调用renderer的render方法。代码如下：

init() {
  //第一步新建一个场景
  this.scene = new THREE.Scene()
  this.setCamera()
  this.setRenderer()
  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  this.scene.add(cube)
  this.render()
}

//render 方法 
render() {
  this.renderer.render(this.scene, this.camera)
}

按照上面👆去做你会页面还是明明都已经加了，为什么呢？

默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可

所以只要将照相机的位置z轴属性调整一下就可以到图片了

  // 新建透视相机
  setCamera() {
    // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    )
    this.camera.position.z = 5
  }

图片如下：

这时候有同学就会问，嗯搞半天不和canvas 2d 一样嘛，有什么区别？ 看不出立体的感觉？ OK 接下来我就让这个立方体动起来。 其实就是不停的去调用 我们render 函数。 我们用reqestanimationframe。尽量还是不要用setInterval，有一个很简单的优化。

requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

我这里做的让立方体的x,y 不断的+0.1。 先看下代码：

render() {
  this.renderer.render(this.scene, this.camera)
}

animate() {
  requestAnimationFrame(this.animate.bind(this))
  this.cube.rotation.x += 0.01
  this.cube.rotation.y += 0.01
  this.render()
}

效果图如下：

是不是有那个那个感觉了， 我是以最简单的立方体的旋转，带大家从头入门下three.js。 如果看到这里觉得这里，觉得对你有帮助的话，希望你能给我点个赞👍哦，感谢各位老铁了！下面正式地图需求分析。

地图数据的获得

其实最重要的是获取地图数据， 大家可以了解下openStreetMap

这个是一个可供自由编辑的世界地图。OpenStreetMap允许你查看，编辑或者使用世界各地的地理数据来帮助你。

这里我自己把**地图的数据json拷贝下来了，代码如下：

// 加载地图数据
loadMapData() {
  const loader = new THREE.FileLoader()
  loader.load('../json/china.json', (data) => {
    const jsondata = JSON.parse(JSON.stringify(data))
  })
}

我给大家先看下json 数据的格式


其实主要的是下面有个经纬度坐标， 其实这个才是我关心的，有了点才能生成线，最后才能生成平面。 这里涉及到一个知识点， 墨卡托投影转换。 墨卡托投影转换可以把我们经纬度坐标转换成我们对应平面的2d坐标。 大家对这个推导过程的感性的可以看下这篇文章： 传送门

这里我直接用可视化框架——d3 它里面有自带的墨卡托投影转换。

// 墨卡托投影转换
  const projection = d3
    .geoMercator()
    .center([104.0, 37.5])
    .scale(80)
    .translate([0, 0])

由于**有很多省,每个省都对应一个Object3d。

Object3d是three.js 所有的基类, 提供了一系列的属性和方法来对三维空间中的物体进行操纵。可以通过.add( object )方法来将对象进行组合，该方法将对象添加为子对象

我这里的整个**是一个大的Object3d，每一个省是一个Object3d，省是挂在**下的。 然后**这个Map挂在scene这个Object3d下。 很明显，在three.js 是一个很典型的树形数据结构，我画了张图给大家看下。

Scence场景下挂了很多东西， 其中有一个就是Map, 整个地图， 然后每个省份， 每个省份又是由Mesh和lLine 组成的。

我们看下代码：

     generateGeometry(jsondata) {
          // 初始化一个地图对象
          this.map = new THREE.Object3D()
          // 墨卡托投影转换
          const projection = d3
            .geoMercator()
            .center([104.0, 37.5])
            .scale(80)
            .translate([0, 0])

          jsondata.features.forEach((elem) => {
            // 定一个省份3D对象
            const province = new THREE.Object3D()
            this.map.add(province)
          })
          this.scene.add(this.map)
        }

看到这里我想你可能没有什么问题，我们整体框架定下来了，接下来我们进入核心环节

生成地图几何体

这里用到了 Three.shape() 和 THREE.ExtrudeGeometry（） 为什么会用到这个呢？ 我给大家解释下， 首先每一个省份轮廓组成的下标是一个 2d坐标，但是我们要生成立方体，shape() 可以定义一个二维形状平面。 它可以和ExtrudeGeometry一起使用，获取点，或者获取三角面。

代码如下：

    // 每个的 坐标 数组
    const coordinates = elem.geometry.coordinates
    // 循环坐标数组
    coordinates.forEach((multiPolygon) => {
      multiPolygon.forEach((polygon) => {
        const shape = new THREE.Shape()
        const lineMaterial = new THREE.LineBasicMaterial({
          color: 'white',
        })
        const lineGeometry = new THREE.Geometry()

        for (let i = 0; i < polygon.length; i++) {
          const [x, y] = projection(polygon[i])
          if (i === 0) {
            shape.moveTo(x, -y)
          }
          shape.lineTo(x, -y)
          lineGeometry.vertices.push(new THREE.Vector3(x, -y, 4.01))
        }

        const extrudeSettings = {
          depth: 10,
          bevelEnabled: false,
        }

        const geometry = new THREE.ExtrudeGeometry(
          shape,
          extrudeSettings
        )
        const material = new THREE.MeshBasicMaterial({
          color: '#2defff',
          transparent: true,
          opacity: 0.6,
        })
        const material1 = new THREE.MeshBasicMaterial({
          color: '#3480C4',
          transparent: true,
          opacity: 0.5,
        })

        const mesh = new THREE.Mesh(geometry, [material, material1])
        const line = new THREE.Line(lineGeometry, lineMaterial)
        province.add(mesh)
        province.add(line)
      })
    })

遍历第一个点的的和canvas2d画图其实是一模一样的， 移动起点， 然后后面在划线， 画出轮廓。然后我们在这里可以设置拉伸的深度， 然后接下来就是设置材质了。lineGeometry 其实 对应的是轮廓的边线。我们看下图片吧：

相机辅助视图

为了方便调相机位置， 我增加了辅助视图， cameraHelper。 然后你回看下屏幕会出现一个十字架，然后我们就可以不断地调整相机的位置，让我们地地图处于画面的**：

addHelper() {
  const helper = new THREE.CameraHelper(this.camera)
  this.scene.add(helper)
}

经过辅助的视图地不断调整：

哈哈哈哈，是不是有那个味道了。到这里我们的**地图已经在画布的**了就已经实现了。

增加交互控制器

现在地图是已经生成了，但是用户交互感比较差，这里我们引入three的OrbitControls 可以用鼠标在画面随意转动，就可以看到立方体的每一个部分了。但是这个方法不在three 的包里面， 得单独引入一个文件代码如下：

setController() {
  this.controller = new THREE.OrbitControls(
    this.camera,
    document.getElementById('canvas')
  )
}

我们看下效果：

射线追踪

但是对于我自己而言还是不满意， 我怎么知道的我点击的是哪一个省份呢，OK这时候就要引入我们three中非常重要的一个类了，Raycaster 。

这个类用于进行raycasting（光线投射）。 光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

我们可以对canvas监听的onmouseMove 事件，然后 我们就可以知道当前移动的鼠标是选择的哪一个mesh。但是在这之前，我们先对每一个province这个对象上增加一个属性来表示他是哪一个省份的。

// 将省份的属性 加进来
province.properties = elem.properties

Ok, 我们可以引入射线追踪了带入如下：

setRaycaster() {
  this.raycaster = new THREE.Raycaster()
  this.mouse = new THREE.Vector2()
  const onMouseMove = (event) => {
    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
    this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
  }
  window.addEventListener('mousemove', onMouseMove, false)
}

animate() {
  requestAnimationFrame(this.animate.bind(this))
  // 通过摄像机和鼠标位置更新射线
  this.raycaster.setFromCamera(this.mouse, this.camera)
  this.render()
}

由于我们不停地在在画布移动， 所以需要不停的的射线位置。现在有了射线， 那我们需要场景的所有东西去比较了，rayCaster 也提供了方法代码如下：

const intersects = this.raycaster.intersectObjects(
  this.scene.children, // 场景的
  true  // 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分
)

这个intersects得到的交叉很多，但是呢我们只选择其中一个，那就是物体材质个数有两个的， 因为我们上面就是用对mesh用两个材质

 const mesh = new THREE.Mesh(geometry, [material, material1])

所以过滤代码如下

animate() {
  requestAnimationFrame(this.animate.bind(this))
  // 通过摄像机和鼠标位置更新射线
  this.raycaster.setFromCamera(this.mouse, this.camera)
  // 算出射线 与当场景相交的对象有那些
  const intersects = this.raycaster.intersectObjects(
    this.scene.children,
    true
  )
  const find = intersects.find(
    (item) => item.object.material && item.object.material.length === 2
  )

  this.render()
}

我怎么知道我到底找到没，我们对找到的mesh将它的表面变成灰色，但是这样会导致一个问题，我们鼠标再一次移动的时候要把上一次的材质给他恢复过来。

代码如下：

 animate() {
    requestAnimationFrame(this.animate.bind(this))
    // 通过摄像机和鼠标位置更新射线
    this.raycaster.setFromCamera(this.mouse, this.camera)
    // 算出射线 与当场景相交的对象有那些
    const intersects = this.raycaster.intersectObjects(
      this.scene.children,
      true
    )
    // 恢复上一次清空的
    if (this.lastPick) {
      this.lastPick.object.material[0].color.set('#2defff')
      this.lastPick.object.material[1].color.set('#3480C4')
    }
    this.lastPick = null
    this.lastPick = intersects.find(
      (item) => item.object.material && item.object.material.length === 2
    )
    if (this.lastPick) {
      this.lastPick.object.material[0].color.set(0xff0000)
      this.lastPick.object.material[1].color.set(0xff0000)
    }

    this.render()
  }

看下效果图：

增加tooltip

为了让交互更加完美，找到了同时在鼠标右下方显示个tooltip，那这个肯定是一个div默认是影藏的，然后根据鼠标的移动移动相应的位置。

第一步新建div

<div id="tooltip"></div>

第二步设置样式 默认是影藏的

#tooltip {
  position: absolute;
  z-index: 2;
  background: white;
  padding: 10px;
  border-radius: 2px;
  visibility: hidden;
}

第三步更改div的位置：

  setRaycaster() {
    this.raycaster = new THREE.Raycaster()
    this.mouse = new THREE.Vector2()
    this.tooltip = document.getElementById('tooltip')
    const onMouseMove = (event) => {
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
      // 更改div位置
      this.tooltip.style.left = event.clientX + 2 + 'px'
      this.tooltip.style.top = event.clientY + 2 + 'px'
    }

    window.addEventListener('mousemove', onMouseMove, false)
  }

最后一步设置tooltip的名字：

showTip() {
    // 显示省份的信息
    if (this.lastPick) {
      const properties = this.lastPick.object.parent.properties

      this.tooltip.textContent = properties.name

      this.tooltip.style.visibility = 'visible'
    } else {
      this.tooltip.style.visibility = 'hidden'
    }
  }

到这里，整个3d可视化地球项目已经完成了， 我们一起看下效果吧。

总结

各位读者，如果觉得看完对你有帮助的话， 希望你不要吝啬你手中的👍，点个👍和关注是对我最大的支持，知识输出不容易，而我勿忘初心，持续分享可视化的好文章，如果你对可视化感兴趣，你可以关注下面我的可视化专栏，或者可以关注我的公众号： 前端图形，持续分享计算机图形学知识。本篇文章的所有代码都在我的github 上 欢迎star， 最后文章有哪里写的不对的地方，欢迎指正交流。

前端：

大家好我是Fly哥，最近公众号来了很新朋友， 正如我公众号（前端图形）的名字一样，我会持续专注分享前端图形学知识，很多同学后台问我这个可以做什么，我这里简单回答下

1. 第一你可以做数据可视化，大厂做这个比较多，小公司可能就是用大厂开发的框架， 比如 百度的echarts 蚂蚁的antv,这里2d 就是canvas、 svg 3d 就是 three.js 或者webgl 或者 babylon.js 如果你没啥方向，然后你的背景又不是特别好， 你可以选择去往这个方向， 我也认识很多猎头，现在市面上去招一个3D前端特别少的，可能也和岗位多少有关系。 但是计算机图形学是深水期， 真的难，对数学要求非常高，越复杂的就需要的数学能力越高， 大学数学这样子。做3d 前端不是代表你放弃前端，我之前就是错误了**，前端基础要牢固， 然后深入在图形这方面， 广度和深度都要有，也就不存在什么危机啥的**，因为这东西卷不进来了， 门槛立马就上来了。
2. 第二的话 就是随着学习的深入，你可以做一些2d 游戏， 或者3d 游戏 也就是市面上所谓的游戏前端， 这东西我也是非常看好的吗，为啥呢， 个人看法哈。你可以看当下比较火的APP, 比如抖音、淘宝、京东、soul、得物 你去看这些app ,都有一个特点，你要去做用户增长， 那你的互动效果就要非常好，用户留存要高， 养成用户粘性。做互动效果，3d 的效果肯定是比2d 的帅的，简称 就是花里胡哨。 比如抖音的走路游戏， 淘宝双十一的养猫， 这些背后都是图形的应用。最近我也在做cocos， 上手非常快。可以说是降维打击吧，知识都是想通的，无论市面上出再多， 要学这些基础知识，一通百通。 我希望大家理解，每一个新框架的出现，都是为了解决某个问题， 但是计算机基础的知识是永远不会变的。
3. 第三的 其实为了考虑到每个粉丝朋友，每个人的基础不一样， 我之前写的文章不够系列，然后后面计划去写个系列文章， 内容也不会太长，轻松学会， 我也想写一下比较有深度的文章，但是受众太小，我要是写shader, 很多同学都不知道。 但是呢，后面打算文章的难易度， 我会控制，深度同样也有， 不辜负每位粉丝朋友的喜欢，我也不能无条件为爱发电，所以会接广告，希望大家理解，但是我也会给大家送小礼品， 没加我好友的赶紧了， 别错过了。 好了废话不多说了，正文开始了

图形学这个领域目前来看是很好玩也很有前景的一个方向，当我们了解它的基础知识，get到它好玩地方的时候，我们可以很轻松延伸到可视化这一领域进行拓展。本文会尽量以很通俗很详细的方式来向大家介绍，希望读者有所收获。

先带大家看几张有趣的照片~

像这个由抛物线，阿基米德螺旋线以及星形线构成的图片，以及这颗随机树都是通过我们一些简单的数学知识来绘制成，下面我也会以详细的代码来实现这些图片。

目录

因为是系列篇之基础入门篇，我会先从图形基础和数学基础这两个部分开始讲起:

图形基础

在 Web 上，图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统，其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式，一般大体上有 4 种。

1. 传统的html + css

与传统的 Web 应用相比，可视化项目，尤其是 PC 端的可视化大屏展现，使用HTML 与 CSS 情景相对较少，于是可能有些人会误认为，可视化只能使用 SVG、Canvas 这些方式，不能使用 HTML 与 CSS。当然了，这个想法是不对。

其实现代浏览器的HTML、CSS 表现能力很强大,其实一些简单的可视化图表，完全可以用 CSS 来实现，比如，我们常见的柱状图、饼图和折线图。能简化开发，又不需要引入额外的库，可以节省资源，提高网页打开的速度。

但是使用HTML + CSS也是有一定得弊端：

1）维护麻烦，在 CSS 代码里，我们很难看出数据与图形的对应关系，有很多换算也需要开发人员自己来做。这样一来，一旦图表或数据发生改动，就需要我们重新计算，所以维护起来会很麻烦。

1. 性能开销是非常大，HTML 和 CSS 作为浏览器渲染引擎的一部分，为了完成页面渲染的工作，除了绘制图形外，还要做很多额外的工作。比如说，浏览器的渲染引擎在工作时，要先解析 HTML、SVG、CSS，构建 DOM 树、RenderObject 树和 RenderLayer 树，然后用 HTML（或 SVG）绘图。当图形发生变化时，我们很可能要重新执行全部的工作。

那有没有更好的实现方式，当我们在重绘图像时，不会发生重新解析文档和构建结构的过程，这个当然是有的，那后面也会介绍到。

2. SVG

SVG 它是浏览器支持的一种基于 XML 语法的图像格式，它的 XML 语言本身和 HTML 非常接近，都是由标签 + 属性构成的，而且浏览器的 CSS、JavaScript 都能够正常作用于 SVG 元素。

3. canvas2D

接下来到了图形基础的重点，canvas2D,后续的数学基础部分也是大多数以它为基础进行绘制。

这里说一下它的声明式绘图系统和指令式绘图系统区别:

1）声明式绘图系统：我们根据数据创建各种不同的图形元素（或者 CSS 规则），然后利用浏览器渲染引擎解析它们并渲染出来。

2）指令式绘图系统：它更多的是浏览器提供的一种可以直接用代码在一块平面的画布上绘制图形的api，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然后引擎直接在页面上绘制图形。

总结来说，如下面图所示，像Canvas 能够直接操作绘图上下文，不需要经过 HTML、CSS 解析、构建渲染树、布局等一系列操作。因此单纯绘图的话，Canvas 比 HTML/CSS 和 SVG 要快得多、在重绘图像时，也不会发生重新解析文档和构建结构的过程，开销要小很多。

4. WebGL

这里webGL我们也不作为重点，这里我们简单说一下其使用场景:

第一种情况，如果我们要绘制的图形数量非常多，比如有多达数万个几何图形需要绘制，而且它们的位置和方向都在不停地变化，如果使用 Canvas2D 绘制，性能是会达到瓶颈的。这个时候，我们就需要使用 GPU 能力，直接用 WebGL 来绘制。

第二种情况，如果我们要对较大图像的细节做像素处理，比如，实现物体的光影、流体效果和一些复杂的像素滤镜。由于这些效果往往要精准地改变一个图像全局或局部区域的所有像素点，要计算的像素点数量非常的多（一般是数十万甚至上百万数量级的），我们也要用 WebGL 来绘制。

第三种情况是绘制 3D 物体。因为 WebGL 内置了对 3D 物体的投影、深度检测等特性，所以用它来渲染 3D 物体就不需要我们自己对坐标做底层的处理了。那在这种情况下，WebGL 无论是在使用上还是性能上都有很大优势。

要使用 WebGL 绘图，我们必须要深入细节里,换句话说就是，我们必须要和内存、GPU 打交道，真正控制图形输出的每一个细节。

数据经过CPU（**处理单元，负责逻辑计算）处理，成为具有特定结构的几何信息。然后，信息会被送到GPU（图形处理单元，负责图形计算）中进行处理。在GPU中要经过两个步骤生成光栅信息（构成图像的像素矩阵），这些光栅信息会输出到帧缓存（一块内存地址）中，最后渲染到屏幕上。

GPU 是由大量的小型处理单元构成的，它可能远远没有 CPU 那么强大，但胜在数量众多，可以保证每个单元处理一个简单的任务。即使我们要处理一张 800 * 600 大小的图片，GPU 也可以保证这 48 万个像素点分别对应一个小单元，这样我们就可以同时对每个像素点进行计算了。

这里注意一下，图里红框框住的Default levels。里面按照严重的级别排序分别为：Verbose（详细）,Info（信息），Warnings（警告）,Error（错误）。我们可以通过下拉框的选择搭配Filter的功能来对控制台打印的信息进行筛选。

数学基础

1.1 坐标系与向量之以canvas为例实现坐标系的转换

这里首先我要先从对坐标系进行转换进行讲起，那为什么我要先讲坐标系的转换问题：因为转换坐标系对于图形学绘制而言，实在太重要了，后续所有图形的绘制都要用到这个**，具体为什么我们先从一个之前前面看到的图形讲起：

首先经过一顿坐标点换算，我们得出每个点具体的坐标（这里我用了一个Rough.js的库，绘制一个手绘风格的图像），最终算出山顶的坐标就是 (-80, 100) 和 (80, 100)，山脚的坐标就是 (-180, 0)、(20, 0)、(-20, 0)、(180, 0)，太阳的中心点的坐标就是 (0, 150)。

坐标系变化的方案如下：

1：首先，我们通过 translate 变换将 Canvas 画布的坐标原点，从左上角 (0, 0) 点移动至 (256, 256) 位置，即画布的底边上的中点位置。接着，以移动了原点后新的坐标为参照，通过 scale(1, -1) 将 y 轴向下的部分，即 y>0 的部分沿 x 轴翻转 180 度，这样坐标系就变成以画布底边中点为原点，x 轴向右，y 轴向上的坐标系了。

2：山顶的坐标就是 (-80, 100) 和 (80, 100)，山脚的坐标就是 (-180, 0)、(20, 0)、(-20, 0)、(180, 0)，太阳的中心点的坐标就是 (0, 150)。

3：其实这个思路是非常重要的，因为这个例子要绘制的图形很少，所以还不太能体现使用坐标系变换的好处。不过，可以想一下，在许多应用场景中，我们都要处理成百上千的图形。如果这个时候，我们在原始坐标下通过计算顶点来绘制图形，计算量会非常大，很麻烦。那采用坐标变换的方式就是一个很好的优化思路，它能够简化计算量，这不仅让代码更容易理解，也可以节省 CPU 运算的时间。

1.2 坐标系与向量描述点和线段（基础）

不管我们用什么绘图系统绘制图形，一般的几何图形都是由点、线段和面构成。其中，点和线段是基础的图元信息，因此，如何描述它们是绘图的关键。在讲解完转换坐标系后，那么接下来带大家真正开启数学知识中的向量基础

这里我先用一些代码来表示一些向量的基础知识：

接下来我们进行实战部分，用刚才介绍的向量知识来绘制一个随机的小树，这里的枝干方向是随机的。

1：第一步还是非常重要的一个坐标变换，这里，我们要做的变换是将坐标原点从左上角移动到左下角，并且让 y 轴翻转为向上。

2：我们定义一个画树枝的函数 drawBranch。

3：创建一个单位向量 (1, 0)，它是一个朝向 x 轴，长度为 1 的向量。然后我们旋转 dir 弧度，再乘以树枝长度 length。这样，我们就能计算出树枝的终点坐标了。（这里我封装了一个class Vector2D里面定义了一一些方法，包括向量的旋转）

4：我们可以从一个起始角度开始递归地旋转树枝，每次将树枝分叉成左右两个分枝。这样，我们得到的就是一棵形状规律的树。

5：我们修改代码，加入随机因子，让迭代生成的新树枝有一个随机的偏转角度。这样，我们就可以得到一棵随机的树。

1.3 向量和参数方程描述曲线

接下来会从向量过渡到参数方程的阶段：

1：向量绘制折线的方法来绘制正多边形，当多边形的边数非常多的时候，这个图形就会接近圆，将多边形的边数设置得很大，我们就可以绘制出圆形。

2：由于很难精确到图形的位置和大小，并且换算的过程比较繁琐会很容易出错，但是为了画出更多样的以及更多的曲线样式，我们需要选择更好的模型，接下来自然会引出参数方程。

1.3.1 参数方程之基础图形

接下来还是先带大家熟悉一下参数方程的基础概念，首先以圆形与椭圆形进行举例，他们的参数方程比较相似，这里我把公式给大家展示出来。

在代码实现参数方程的过程中呢，这里我通过设置TAU_SEGMENTS的点的数量为60平均分摊到2π（360度）上，它们可以理解成这个圆或者这个椭圆由多少个坐标点来绘制而成，然后将一个个坐标点加入到数组中。然后将包含有60个点的数组坐标返回，传入我接下来封装的draw函数中。

这里再说一下抛物线的参数方程，当x0,y0为0时，经推导 t = x/ y，这里t的含义可以x除以y的值

接下来会通过一个小demo将我们的代码整合起来，这里的图片在分享的开始也和大家介绍过，通过抛物线，阿基米德螺旋线和星形线组成。

如果我们为每一种曲线都分别对应实现一个函数，就会非常笨拙和繁琐。那为了方便，这里我们采用函数式编程**，封装一个更简单的javascript参数方程绘图模块，以此来绘制出不同的曲线。

那么封装的这个绘图模块的使用过程主要分为三步：

第一步，我们实现一个叫做 parametric 的高阶函数，它的参数分别是 x坐标的参数方程和y坐标的参数方程。

第二步，parametric 会返回一个函数，这个函数会接受几个参数，比如，start、end 这样表示参数方程中关键参数范围的参数，以及 seg 这样表示采样点个数的参数等等。在下面的代码中，当 seg 默认 100 时，就表示在 start、end 范围内采样 101（seg+1）个点，后续其他参数是作为常数传给参数方程的数据。

第三步，我们调用 parametric 返回的函数之后，它会返回一个对象。这个对象有两个属性：一个是 points，也就是它生成的顶点数据；另一个是 draw 方法，我们可以利用这个 draw 方法完成绘图

这里我们就不需要像之前一样，每一个图形线都实现其对应的一个函数，只需要统一调用我们封装好的高阶函数，传入我们的参数方程即可，最后统一调用draw函数进行绘制。

这样的话，通过这个封装好的javascript参数方程绘图模块,就可以绘制出很多有意思的图形。

1.4：仿射变换--拓展了解

接下来呢，仿射变换其实也是图形学需要了解的一个数学基础，但是由于时间关系，我会带大家简单了解一下其基本的概念。

这里先关注一下应用场景，痛点，解决方式和仿射变换。

前面我们学习了用向量表示的顶点，来描述曲线和多边形的方法。但是在实际绘制的时候，我们经常需要在画布上绘制许多轮廓相同的图形，难道这也需要我们重复地去计算每个图形的顶点吗？当然不需要。我们只需要创建一个基本的几何轮廓，然后通过仿射变换来改变几何图形的位置、形状、大小和角度。

仿射变换是拓扑学和图形学中一个非常重要的基础概念。利用它，我们才能在可视化应用中快速绘制出形态、位置、大小各异的众多几何图形。所以接下来我们就来说一说仿射变换的数学基础和基本操作，在以后的后续篇中在所有视觉呈现的案例中，是非常重要的。

仿射变换最基本的概念，大家可以记住就是 线性变换 + 平移 线性变换又分为（旋转和缩放） ，总结起来就是平移，旋转加缩放。

总结下来，合到一起就是左图的表达式，经过公示优化后为右面的矩阵形式，在改写的公式里，我们实际上是给线性空间增加了一个维度。换句话说，我们用高维度的线性变换表示了低维度的仿射变换！

以粒子动画应用场景举例，这个公式是非常重要的，它能在一定时间内生成许多随机运动的小图形，这类动画通常是通过给人以视觉上的震撼，来达到获取用户关注的效果。

结束语

在前端整体迅猛发展的大环境下，因为产品需求的驱动，图形学方向技术发展也非常迅速，前端图形学属于一个比较小众的领域，甚至延伸到可视化方向依然属于一比较小众的领域，那么真正阻挡的技术门槛是什么呢？

其实就是对使用者的数学基础比较高，但当我们真正突破了这个技术门槛，甚至可视化方向上突破了WebGL这种更偏底层的门槛，在行业里我们会是特别非常有竞争力的。

那么本次文章还是先带大家来认识一下图形学，后续系列篇中会再延伸到动画、滤镜等其他视觉基础上。这里分享给大家一句话，学习技术的过程，是从接纳和记忆知识开始的，但绝不仅仅是接纳和记忆知识，而是需要深入思考，并自己总结和沉淀的。

参考资料

www.cnblogs.com/miloyip/arc…

zhuanlan.zhihu.com/p/98007510

zhuanlan.zhihu.com/p/69069042

developer.mozilla.org/zh-CN/docs/…

time.geekbang.org/column/intr…

前言

2020东京奥运会已经开幕很多天了，还记得小时候看奥运会的是在2008年的北京奥运会，主题曲是北京欢迎你， 那个时候才上小学吧，几乎有**队的每场必看，当时也是热血沸腾了， 时间转眼已经到了2021年而我也从小学生变成了一个每天不断敲代码的程序员👩‍💻，看奥运的时间又少，但是又想出分力，既然是程序员，想着能为奥运会搞点什么？第一时间想到了就是给奥运奖牌数🏅做可视化，因为单看表格数据，不能体现出我们**的牛逼🐂， 废话不多说，直接开写。

数据获得

我们先看下奥运奖牌数的表格，这东西肯定是接口获得的吧，我不可能手写吧，而且每天都是更新的，难道我要每天去改，肯定不是这样的，我当时脑子里就想着去做爬虫，去用puppeteer 去模拟浏览器的行为然后获取页面的原生dom,然后将表格的数据搞出来， 然后我就很兴奋的去搞了，写了下面的代码：

const puppeteer = require('puppeteer')

async function main() {
  // 启动chrome浏览器
  const browser = await puppeteer.launch({
    // // 指定该浏览器的路径
    // executablePath: chromiumPath,
    // 是否为无头浏览器模式，默认为无头浏览器模式
    headless: false,
  })

  // 在一个默认的浏览器上下文中被创建一个新页面
  const page1 = await browser.newPage()

  // 空白页刚问该指定网址
  await page1.goto(
    'https://tiyu.baidu.com/tokyoly/home/tab/%E5%A5%96%E7%89%8C%E6%A6%9C/from/pc'
  )

  // 等待title节点出现
  await page1.waitForSelector('title')

  // 用page自带的方法获取节点

  // 用js获取节点
  const titleDomText2 = await page1.evaluate(() => {
    const titleDom = document.querySelectorAll('#kw')
    return titleDom
  })
  console.log(titleDomText2, '查看数据---')
  // 截图
  //await page1.screenshot({ path: 'google.png' })
  //   await page1.pdf({
  //     path: './baidu.pdf',
  //   })
  browser.close()
}
main()

然后当我很兴奋的想要去结果的时候，结果发现是空。百度是不是做了反爬虫协议， 毕竟我是爬虫菜鸟，搞了很久。还是没搞出来。如果有大佬会，欢迎指点我下哦！

不过这个puppeteer，这个库有点牛皮的，可以实现网页截图、生成pdf、拦截请求，其实有点自动化测试的感觉。感兴趣的同学可以自行了解一下，这不在本篇文章介绍的重点。

接口获得

然后这时候就开始疯狂百度，开始寻找有没有现成的api, 真是踏破铁鞋无觅处，得来全不费工夫。被我找到了，原来是有大佬已经开始做了， 这时候我本地直接去请求那个接口是有问题的，前端不得不处理的问题—— 跨域。 看着东西我头疼哇， 不过没关系， 我直接node起一个服务器， 我node去请求那个接口，然后后台在配置下跨域， 搞定接口数据就直接获得了， 后台服务我是用的express， 搭建的服务器直接随便搞搞的。代码如下：

const axios = require('axios')
const express = require('express')
const request = require('request')
const app = express()

const allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  res.header('Access-Control-Allow-Credentials', 'true')
  next()
}
app.use(allowCrossDomain)

app.get('/data', (req, res) => {
  request(
    {
      url: 'http://apia.yikeapi.com/olympic/?appid=43656176&appsecret=I42og6Lm',
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    },
    function (error, response, body) {
      if (error) {
        res.send(error)
      } else {
        res.send(response)
      }
    }
  )
})
app.listen(3030)

这样我就是实现了接口转发，也搞定了跨域问题，前台我直接用 fetch去请求数据然后做一层数据转换，但是这个接口不能频繁请求，动不动就crash, 是真的烦， OK所以直接做了一个操作， 将数据 存到localstorage中，然后做一个定时刷新，时间大概是一天一刷。这样就保证数据的有效性。代码如下：

getData() {
  let curTime = Date.now()
  if (localStorage.getItem('aoyun')) {
    let { list, time } = JSON.parse(localStorage.getItem('aoyun'))
    console.log(curTime - time, '查看时间差')
    if (curTime - time <= 24 * 60 * 60 * 60) {
      this.data = list
    } else {
      this.fetchData()
    }
  } else {
    this.fetchData()
  }
}

fetchData() {
  fetch('http://localhost:3030/data')
    .then((res) => res.json())
    .then((res) => {
      const { errcode, list } = JSON.parse(res.body)
      if (errcode === 100) {
        alert('接口请求太频繁')
      } else if (errcode === 0) {
        this.data = list
        const obj = {
          list,
          time: Date.now(),
        }
        localStorage.setItem('aoyun', JSON.stringify(obj))
      }
    })
    .catch((err) => {
      console.log(err)
    })
}