入个门吧，Canvas绘图【趣学前端】
背景
我之前的公司官网，首页有个汽车动画，从人物打开车门进入汽车，到里面的结构，再到汽车上路，全部的动画效果都是用Canvas实现的，一气呵成，非常壮观。不过，因为技术团队是国外的部门，所以没能讨教一二。
最近睡前习惯翻会书，已读完《JavaScript权威指南》，开始阅读《HTML5 Canvas 开发详解》。可能是秋季的清爽，又或者藕粉的甜蜜，书读起来比绸缎还丝滑。
所以，我准备写写Canvas入门体验笔记。
在Canvas上绘图
我之前尝试用CSS实现各种图形效果，但是部分弧线、曲线、抛物线，用CSS不好实现。现在用Canvas去绘制图形，原来不好实现的图形，变得简单多了。
吃豆子
https://code.juejin.cn/pen/7134712416973094953
这个是MDN上的一个图形。如果用CSS绘制，也能实现但是比较复杂，使用Canvas实现，90行左右代码就能实现。接下来我就用这个图形实现的过程，介绍一下Canvas的基础知识点。
划重点
知识点来咯。
getContext
Canvas被设计为可以与多个环境工作。一般绘图使用的是2D环境，所以需要得到2D环境。
| 方法介绍 |
参数 |
| 该方法返回canvas 的上下文，如果上下文没有定义则返回 null。 |
2d： 建立一个 CanvasRenderingContext2D 二维渲染上下文。 webgl (或"experimental-webgl") ：这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。 webgl2(或 "experimental-webgl2") ：这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。Experimental bitmaprenderer：这将创建一个只提供将 canvas 内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext 。 |
当编写出下面这行代码的时候，就获取到了 2D 画布的渲染上下文，可以使用它画想画的图形了。
var ctx = canvas.getContext('2d');beginPath
beginPath方法通过清空子路径列表开始一个新路径。调用它可以创建一个新的路径。
绘制图形的第一步，需要确定一个新的路径。
ctx.beginPath();moveTo
| 方法介绍 |
参数 |
| 该方法可以将一个新的子路径的起始点移动到 (x，y) 坐标。 |
x: 点的 x 轴。 y: 点的 y 轴。 |
将路径的起始点移动到坐标(12,27):
ctx.moveTo(12, 27);lineTo
| 方法介绍 |
参数 |
| 该方法使用直线连接子路径的终点到 (x，y) 坐标（并不会真正地绘制）。 |
x: 点的x轴。 y: 点的y轴。 |
将路径的终点移动到坐标(12, 147)，（如果这个时候完成绘制的话，画布上将呈现一条直线。）
ctx.lineTo(12, 147);quadraticCurveTo
| 方法介绍 |
参数 |
| 该方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。 二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。 |
cpx：控制点的 x 轴坐标。 cpy：控制点的 y 轴坐标。 x: 终点的 x 轴坐标。 y: 终点的 y 轴坐标。 |
控制点的坐标(12, 162)，终点的坐标(27, 162)，形成一个曲线路径：
ctx.quadraticCurveTo(12, 162, 27, 162);这样，矩形的一个边的路径就绘制完成了。再重复三次，绘制不同变边的路径，矩形的路径就全部完成了。
stroke
| 方法介绍 |
参数 |
| 该方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 |
path：绘制的路径Path2D 。 |
路径确定之后，使用stroke()方法绘制路径，图形会实现了。
ctx.stroke();圆角矩形
经过一系列的路径绘制就实现了一个圆角矩形。
总结
moveTo() 和 lineTo() 方法定义的路径，并不会真正的绘制。当一个图形的所有路径完成之后，使用stroke()完成绘制。
二次贝塞尔曲线的学习可以看这篇文章☞「这一篇让你彻底搞懂贝塞尔曲线的原理」。
学到这里，基本了解了如何定义图形的路径，以及完成绘制。
Canvas还有其他实用属性和方法，下篇继续学习。
今天也是特别有收获的一天。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）