这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战
大家好，我是前端西瓜哥。
今天继续讲解 Cavans 入门小教程的第二部分。
这是 Canvas 入门的系列文章：
上一篇：Canvas 简单入门小教程
清空画布的指定矩形区域
ctx.clearRect(x, y, width, height);
复制代码清除左上角坐标为 (x, y)，宽高为 width 和 height 的矩形区域范围。
清除整个画布 的写法为：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
复制代码另外，如果你重新设置 canvas 元素的宽或高，画布也会整个清空。
canvas.height = canvas.height;
复制代码绘制文字
ctx.fillStyle = '#5391F5'; // 蓝色
ctx.font = '48px serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello Canvas!', 10, 10); // 填充文字
ctx.lineWidth = 2;
ctx.strokeText('Hello Canvas!', 10, 10); // 描边文字
复制代码我们先设置一下字体的样式。
ctx.font 用于指定字体的样式，默认值为 10px sans-serif。
ctx.font 的取值同 CSS 的 font 属性。font 是个简写属性，即多个属性的组合。其中必须要包含 font-size 和 font-family 属性，否则就会失效。
我一直觉得简写属性是个坏文明，因为它通常有太多的属性，而且可以有多种组合方式，不好记忆。
Canvas 没有提供 fontSize 属性，你只能通过 font 属性来设置文字大小，还得额外设置一个 font-family 属性，挺糟心的属于是。
ctx.textBaseline 用于设置文字的基线，默认值为 alphabetic。
考虑到我们设置坐标时，习惯为左上角，所以可以考虑将
textBaseline 设置为 top。
ctx.fillText()方法传入（1）文字内容、（2）文字起点的坐标、以及（3）可选的最大宽度，文字超过这个宽度，就会为适应这个宽度把文字挤扁。
ctx.strokeText() 用法同 ctx.fillText，不再赘述。
绘制的效果如下：
绘制图片
const img = new Image();
img.src = './watermelon.jpg';
img.onload = function() {
ctx.drawImage(img, 300, 0); // 将图片绘制到画布的 (300, 0) 位置。
}
复制代码我们通过 ctx.drawImage() 方法来绘制图片。
该方法有多种传参方式，可以实现只使用图片的部分区域，然后进行缩放。
但本文是入门文章，所以上面的代码只是将原图片不做额外处理，原封不动地绘制到画布上。
绘制的结果如下：
存档和回档
因为我们每次要绘制新的图形，可能要临时修改全局的一些属性，比如 fillStyle、font 之类的，在绘制完这个图形后再恢复。
如果我们每次都要记住修改了哪些属性，然后再显式地改回原来的属性，那成本实在是太大了，还容易泄漏。
所以 Canvas 提供了一对方法来解决这个问题。
ctx.fillStyle = '#5391f5'; // 此时 #5391f5 蓝色
ctx.save(); // 存档
ctx.fillStyle = '#FFDF5C'; // 黄色
ctx.fillRect(20, 80, 20, 20);
ctx.restore(); // 回档，fillStyle 重新变回蓝色
ctx.fillRect(50, 80, 20, 20);
复制代码ctx.save() 会将当前的绘制状态全部保存起来，然后执行 ctx.restore() 则会将这个状态读取回来，并将之前的存档删除。
其实底层是一个栈，你可以连续 save，会将多个绘制状态推入栈，然后 restore 则会将最顶部的绘制状态出栈，然后应用到 canvas 上。
图片的绘制结果为：
结尾
本文讲解了如何清空特定区域、绘制文字、绘制图片、存档和回档的操作，建议你也要动手尝试一番。
我们下篇文章见。