初识canvas（一）

首先给大家发布一个消息，从今天开始，作者会陆续分享基于 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()

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

4. 画圆

画圆的方法为 --- arc(x,y,r,start,end, counterclockwise)

同图形一样，如果我们用fill() 来填充，那就是实心圆。使用stroke() 则是空心圆。

x,y 为圆心坐标。r 为圆的半径。start, end 分别为起始和终止弧度。

counterclockwise 规定是顺时针还是逆时针 false=顺时针（默认）、true=逆时针

角度转弧度公式：

角度值 * Math.PI / 180

如：绘制一个红色、半径为50的实心圆

c.fillStyle = 'red';
c.arc(200, 200, 50, 0, 2 * Math.PI);
c.fill();

注意：

在绘制半圆或扇形的时候，我们需要使用 moveTo(圆心x, 圆心y) 来链接扇形半圆的圆心

c.fillStyle = 'red';
c.arc(200, 200, 50, 0, Math.PI);
c.moveTo(200, 200);
c.fill();

小伙伴们可以自己实现顺时针和逆时针绘图，有意想不到的效果哟。

5. 清除和剪切

5.1 清除

clearRect(x,y,w,h) 是清理一定区域的内容。x,y 是起始坐标点。w,h 是清除范围。

栗子：

c.clearRect(0,0,100,100)

这个栗子的意思是清理 100 * 100 范围内的内容。

5.2 剪切

clip 剪切的功能是类似于镜头的功能，我们可以只保留下来需要的内容（镜头内的内容）。将镜头外的内容丢掉。

如：

// 只保留镜头这个圆下的内容
c.beginPath();
c.arc(200, 200, 50, 0, Math.PI * 2);
c.stroke();
c.clip();
c.closePath()

// 让整个画布呈现绿色。
c.beginPath()
c.fillStyle = 'green';
c.fillRect(0, 0, ctx.width, ctx.height); // 宽高为画布的宽和高

利用这个功能可以实现很多很多……好玩的功能。大家可以自己实现一下。

6. 添加阴影

本小节介绍如何给我们绘制出来的图形添加阴影。这里我们需要知道4个属性：

shadowOffsetX：水平位置偏移量
shadowOffsetY：垂直位置偏移量
shadowColor：阴影颜色
shadowBlur：阴影模糊值

栗子：给刚才绘制的绿色矩形添加一个 黑色,水平偏移10,垂直偏移10,模糊值为10的阴影。

// 绘制实心的绿色矩形
c.beginPath();
c.fillStyle = 'green';
c.moveTo(150, 250);
c.lineTo(150, 350);
c.lineTo(350, 350);
c.lineTo(350, 250);
// 添加阴影
c.shadowOffsetX = 10;
c.shadowOffsetY = 10;
c.shadowColor = 'black';
c.shadowBlur = 10;
c.fill()
c.closePath()

好了，今天的内容我们就先分享到这里，在下篇文章中，我们会详细的分享下关于文本操作、目标和源操作、动画、背景、渐变、图片及像素操作、画曲线、贝塞尔曲线等内容。

Bye~