开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情
现在很多页面的动画看着都很酷炫。以前要做个动画基本都是通过 setInterval 方法来控制动画的执行。现在 HTML5 的新特性 canvas 。让 js 在上面动态绘制图片。
画布功能
使用 canvas 标签创建画布元素，至少要设置 width 和 height 才能知道需要多大的画布。为确保浏览器都能支持 canvas 标签，需要增加获取绘图上下文的引用。
<body>
<canvas id="demo" width="200" height="200"></canvas>
</body>
<script>
let canvas = document.getElementById("demo");
// 确保浏览器是支持 canvas 画布
if (canvas.getContext) {
// 要实现绘画，必须先获取绘图的上下文
let context = canvas.getContext("2d")
// 其他功能代码
}
</script>
有了画布后就可以在画布上进行各种绘画工作。首先需要知道绘画都是基于坐标的。而原坐标(0,0)就在画布的左上角。所有的坐标值都会相对于该点进行计算的。绘图能做事情有很多：
- 填充和描边
填充就是对图形填充样式，比如颜色、图像等。描边就是对图形边界的着色。经常使用word 基本可以看到一行背景色，文字变色。我觉得应该就是对所在行的填充，字体的线条描边。
fillStyle 和 strokeStyle 两个属性就是用来实现这个效果的。一开始就设置这两个值时就会使得所有的图形的填充和描边都使用该样式，除非进行修改。
- 绘制矩形：矩形应该是唯一能够在 canvas 中直接绘制出来的形状。其提供了三个方法：
-
- fillRect ：绘制矩形并填充颜色
- strokeRect: 绘制矩形并描边
- clearRect：擦出画布中某个区域，区域就是个矩形
// 填充黄色的矩形
ctx.fillStyle="#fff000"
ctx.fillRect(10,10,50,50)
// 红色描边的矩形
ctx.strokeStyle="red"
ctx.strokeRect(30,30,50,50)
ctx.clearRect(40,40,10,10)
可能这里不好控制的就是坐标的点，要不断的调试和计算。
- 绘制路径
除了矩形，其他形状就需要其他的方法进行绘制。那就是路径，路径可以绘制出复杂的形状和线条，比如圆，曲线等等。绘制路径前必须先调用下 beginPath方法，表示开始绘制路径。
ctx.beginPath();
ctx.arc(200,200,99,0,2*Math.PI, false);
ctx.strokeStyle="#0000ff"
ctx.stroke();
- 绘制文本
使用 fillText 和 strokeText 就可以完成文本的绘制。同时还支持字体样式的设置，使用属性font 字体样式大小字体族，支持使用 CSS语法，textAlign 文本对齐方式 ，textBaseLine 文本基线
canvas 上还支持阴影、渐变等效果，甚至还可以将图案进行填充图形。
所以整个过程其实很简单，就是一个图形的绘制，然后对其样式的设置。可以查看相关的API 很容易就上手 2D 图形的绘制。上面直接使用码上掘金，轻松可以看到实现的效果，好方便呀。
