持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
前言
在html5之前，我们在web网页端的绘画、游戏基本上都是用flash及其插件完成的，而flash的使用带来了许多不便。而在html5的canvas出现之后，前端工程师可以直接利用JS操作画布实现复杂的动画、图片绘制甚至游戏响应，自此flash也逐渐淡化和消亡。
canvas是什么
MDN如此描述canvas：
元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
通过这段描述，我们可以看到canvas以及canvas API就是提供JS的API在一块画布上进行绘画，进而实现前端的动画、游戏等多媒体行为。
在本文中，我将讲述canvas的2d部分，未来会介绍webGL部分。
如何使用canvas
环境准备
首先我们在html中嵌入一个canvas，用JS获取这个对象
<canvas id="c" width="150" height="150">
</canvas>
var canvas = document.getElementById("c")
接下来我们获取渲染上下文（这里忽略了兼容性测试）
var ctx = canvas.getContext('2d');
绘制基本的图像
首先要了解canvas的坐标，x轴从左到右，y轴从上到下
canvas只能支持两种图形绘制：矩形和路径
矩形
| API | 作用 |
|---|---|
| fillRect(x, y, width, height) | 绘制填充矩形 |
| strokeRect(x, y, width, height) | 绘制边框矩形 |
| clearRect(x, y, width, height) | 清楚矩形区域 |
路径
| API | 作用 |
|---|---|
| beginPath() | 新建路径，类似把笔放置到画布上 |
| closePath() | 闭合路径，也就是把路径封闭并且拿起笔 |
| stroke() | 把笔走过的路径的轮廓绘制出来 |
| fill() | 把笔走过的路径的填充绘制出来 |
| moveTo() | 移动画笔 |
当然，路径绘图还有lineTo、arc、arcTo以及贝塞尔曲线操作，这里不一一赘述
Path2D
返回一个新初始化的 Path2D 对象 ，通俗地说，可以理解为把路径储存到对象中，进而模块化地进行绘画。而path2D也可以使用svg语法进行创建。
画笔设置（样式和颜色）
颜色（设置CSS3颜色标准值有效字符串）
| 属性或API | 含义 |
|---|---|
| ctx.fillStyle | 填充颜色 |
| ctx.strokeStyle | 轮廓颜色 |
| ctx.globalAlpha | 颜色透明度 |
| ctx.createLinearGradient(x1,y1,x2,y2) | 线性渐变 |
| ctx.createRadialGradient(x1,y1,r1,x2,y2,r2) | 径向渐变 |
| lineargradient.addColorStop(0~1的标度,颜色值) | 表示渐变中颜色所在的相对位置。 |
线形
| 属性 | 作用 | ||
|---|---|---|---|
| lineWidth(number) | 线宽 | ||
| lineCap(butt | round | square) | 设定线条末端样式 |
| lineJoin(round | bevel | miter) | 设定线条与线条间接合处的样式 |
| miterLimit(number) | 限制当两条线相交时交接处最大长度 | ||
| 方法setLineDash() | 设置虚线样式 |
实例
基于上述入门级的API，我们可以开始画图了
