本章小结

在本章中，我们讨论了在浏览器中绘制图形的技术，重点关注了<canvas>元素。

一个canvas节点代表了我们的程序可以绘制在文档中的一片区域。这个绘图动作是通过一个由getContext方法创建的绘图上下文对象完成的。

2D 绘图接口允许我们填充或者拉伸各种各样的图形。这个上下文的fillStyle属性决定了图形的填充方式。strokeStyle和lineWidth属性用来控制线条的绘制方式。

矩形与文字可以通过使用一个简单的方法调用来绘制。采用fillRect和strokeRect方法绘制矩形，同时采用fillText和strokeText方法绘制文字。要创建一个自定义的图形，我们必须首先建立一个路径。

调用beginPath会创建一个新的路径。很多其他的方法可以向当前的路径添加线条和曲线。比如，lineTo方法可以添加一条直线。当一条路径画完时，它可以被fill方法填充或者被stroke方法勾勒轮廓。

从一张图片或者另一个画布上移动像素到我们的画布上可以用drawImage方法实现。默认情况下，这个方法绘制了整个原图像，但是通过给它更多的参数，你可以拷贝一张图片的某一个特定的区域。我们在游戏中使用了这项技术，从包括许多动作的图像中拷贝出游戏角色的单个独立动作。

图形变换允许你向多个方向绘制图片。2D 绘制上下文拥有一个当前的可以通过translate、scale与rotate进行变换。这些会影响所有的后续的绘制操作。一个变换的状态可以通过save方法来保存，通过restore方法来恢复。

在一个画布上展示动画时，clearRect方法可以用来在重绘之前清除画布的某一部分。