首先给大家发布一个消息，从今天开始，作者会陆续分享基于 3D 内容 -- webgl。同时也希望有兴趣的同学一起讨论。闲话咱们就不说了，直接开始正题。（文章略长，阅读请注意休息哟~）

1. 3D基础 -- 初识 canvas（画布）

说到前端的3D开发，肯定避免不了 canvas 这个内容。我们也从这个内容开始，逐步进入到3D的世界。

1.1 canvas 简介

相信很多小伙伴们对于这个标签并不陌生，在职业生涯中，或多或少都会接触一点儿。

但是！！！我们还是要简单介绍一下它。

• canvas 是一个 HTML5 提供的新标签。
• 主要作用是用来绘制图形。
• 绘制的动作通过 JavaScript 来完成。
• 有多种方法供开发者调用。可以完成工作中遇到的绝大部分开发问题。

1.2 canvas 主要作用

• 用于可视化领域。制作可视化图表等内容。
• 制作图形编辑器等工具。
• 可内嵌多种媒体内容和特效内容。且能与 web 进行很好的兼容。

1.3 canvas 和 svg 的简单对比

• canvas 是基于像素的图形，是位图；svg 是可缩放矢量图形
• canvas 是HTML5标签；svg 是XML标签
• canvas不支持事件处理器，svg 支持事件处理器
• 这里的不支持是说 canvas 标签内绘制的元素不支持，但是 canvas 标签本身是支持的，因为它是一个DOM标签，支持我们经常使用的鼠标等事件。
• 而 svg 本来就是通过dom的形式绘制在页面内。所以svg绘制的图形可以支持事件处理。

1.4 使用方法介绍

<canvas id="ctx" width="400" height="400">您的浏览器不支持canvas，请升级或选择其他浏览器</canvas>

与其他标签一样，我们可以使用<canvas></canvas>的方式来想页面中嵌入一个画布内容。并且指定一个 id 为 ctx。接下来的内容中我们就可以用到这个值。

标签里的内容只在不支持 canvas 的浏览器上才会显示。

这里我们使用内联样式来声明了画布的宽和高。也可以使用javascript 来动态设置，但是需要注意画布失真的问题。

2. 画布使用方法介绍 -- 2D 场景下的使用。

2.1 获取绘图上下文环境

首先我们通过 document.getElementById() 方法来获取到 canvas 这个 DOM元素。

const ctx = document.getElementById('ctx');

然后，我们可以通过获取到的 ctx 来获取绘图上下文。

const c = ctx.getContext('2d'); // 指定为 2d 的视图环境。

这里我们获取到了 2d 的视图环境。之后在分享 webgl 的时候，我们再说下如何获取 3d 的视图环境。

注意：这里是用 ctx 来获取绘图上下文，而不是使用 document。

2.2 画布方向介绍

canvas 的方向分为 x和y 两个方向，也就是垂直和水平方向。如下图所示：

2.3 常用绘制方法

在获取到绘图上下文之后，我们就需要根据自己的喜好来获取绘制图像了，接下来的内容就是告诉我们，如何通过 canvas 提供的方法来绘制图形。

2.2.1 画线

首先介绍的是如何在 canvas 中绘制一条线段。接下来我们会用到以下方法：

• strokeStyle: 设置线条颜色
• moveTo(x, y)： 起始点
• lineTo(x, y)：终点
• stroke()：连接
• lineWidth：控制线条宽度
• lingCap: 控制线段两端展示

// 上面的内容已经获取过绘图上下文，这里直接使用c.strokeStyle = 'red'; // 设置线的颜色为 红色c.moveTo(50, 50); // 从画布的 50 50 这个点开始c.lintTo(100, 100); // 向 100 100 这个点绘制c.stroke(); // 在两个点之间连线

不出意外的话，你会看到在页面上有一条红色的线条。这里你可以把这几个方法和属性看做是一只钢笔。笔油是红色的(strokeStyle)、在纸上点两个点(50,50和100,100)，然后连接两个点(stroke())

接下来我们看怎么改变线条的粗细。---- lineWidth 属性。

c.lineWidth = 10;

改变了线条的粗细之后，接下来看下如何修改线段两端的显示。这里需要用到 ---- lingCap 属性，这个属性有三个值，分别是 butt: 默认, round: 展示圆角, square: 展示矩形。详细展示如下图所示：

2.2.2 画图形

通过线段的基础方法，我们可以在画布上画出来线段。接下来看下如何画一个图形。图形都是有线段绘制的，所以图形的绘制我们可以使用线段来组装，这里就用到了 lineTo 这个方法，因为它可以连续绘制。如下几个例子：

// 绘制红色三角形c.strokeStyle = 'red';c.moveTo(150, 150);c.lineTo(350, 150);c.lineTo(250, 50);c.lineTo(150, 150);c.stroke()// 绘制绿色的矩形c.strokeStyle = 'green';c.moveTo(350, 350);c.lineTo(550, 350);c.lineTo(550, 250);c.lineTo(350, 250);c.lineTo(350, 350);c.stroke()

如果你运行了上面两个例子，那就可以看到一个问题，我们绘制的都是带有边框的图形，并不是实心的。下面我们来说下如何将空心的图形变为实心的.

2.2.3 绘制实心图形

这里我们需要说到以下几个方法和属性

• strokeStyle
• stroke()
• fillStyle
• fill()

strokeStyle, stroke() 这两个方法之前我们已经用过。绘制线条和空心图形的时候使用这两个方法。

fillStyle, fill() 这两个方法是绘制实心图形的时候用到的。如：

// 绘制实心红色三角形c.fillStyle = 'red';c.moveTo(150, 150);c.lineTo(350, 150);c.lineTo(250, 50);c.lineTo(150, 150);c.fill()// 绘制实心的绿色矩形c.fillStyle = 'green';c.moveTo(350, 350);c.lineTo(550, 350);c.lineTo(550, 250);c.lineTo(350, 250);c.lineTo(350, 350);c.fill()

这样我们就得到了两个实心的图形。

绘制图形之后，我们可以通过 -- lineJoin 方法来改变图形角的形状。它有三个值 -- miter: 默认尖角，bevel: 平角， round: 圆角。

此外，canvas 中还提供了两个方法用来绘制实心矩形和空心矩形，分别是 -- fillRect(x, y, w, h)、strokeRect(x,y,w,h)

其中 x, y 表示矩形左上角的坐标。w 表示宽度，h 表示高度。

3. 作用域

不知道大家有没有将 2.2.3 小节的内容同时绘制。如果有，那你能够发现一个问题，实心三角形和实心决定都是显示了最后矩形的绿色。而为三角形设置的红色并没有生效。

这个就是作用域的问题，两个图形同时处于同一个作用域。所以只有最后设置的颜色生效了。怎么避免这种问题呢？

这里就需要用到下面这两个方法：

• beginPath(): 起始作用域
• closePath(): 结束作用域

现在我们来将 2.2.3 的例子做下修改。

// 绘制实心红色三角形c.beginPath();c.fillStyle = 'red';c.moveTo(150, 150);c.lineTo(350, 150);c.lineTo(250, 50);c.lineTo(150, 150);c.fill()c.closePath()// 绘制实心的绿色矩形c.beginPath();c.fillStyle = 'green';c.moveTo(150, 250);c.lineTo(150, 350);c.lineTo(350, 350);c.lineTo(350, 250);c.fill()c.closePath()

这里，我们将三角形和矩形分别放到了不同的作用域中，再次查看画图，此时的三角形是红色，矩形是绿色