图 2. 清单 2 对应的示例图形

清单 2. 绘制 canvas 路径

function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = '#00f'; ctx.strokeStyle = '#f00'; ctx.beginPath(); ctx.arc(75,75,30,0,Math.PI, false); // 绘制一条半圆弧线 ctx.closePath(); // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧 ctx.fill(); // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化 ctx.stroke(); } }

二维变形

Canvas 绘图中另一个重要的概念是 绘画状态（Drawing State），绘画状态反映了渲染上下文当前的瞬时状态，开发人员可以通过对绘画状态的保存 / 恢复操作而快速的回到之前使用的各种属性和变形操作。绘画状态主要由以下三个部分构成：

需要指出的是，当前路径对象以及当前的位图都不包含在绘画状态之中，路径是持续性的对象，如前文所讲，只有通过 beginPath() 操作才会进行重置，而位图则是 canvas 的属性，并非属于渲染上下文的。

开发人员可以使用 save 和 restore 两种方法来保存和恢复 canvas 状态，每调用 save 方法，都会将当前状态压入堆栈中，而相应的 restore 方法则会从堆栈中弹出一个状态，并将当前画面恢复至该状态。绘画状态在 canvas 图形变形操作中应用极为广泛，也非常重要，因为调用一个 restore 方法远比手动恢复先前状态要简单许多，因而，一个较好的习惯是在做变形操作之前先保存 canvas 状态。

二维绘图的常用变形操作在 canvas 中都可到了很好的支持，包括平移（Translate），旋转（Rotate），伸缩（Scale）等等。由于所有的变形操作都基于变形矩阵，因而开发人员始终需要记住一点的就是，一旦没有使用 save/restore 操作保持住原来的绘图状态，那么后续的绘图操作，都会在当前所应用的变形状态下完成。清单 3 使用平移和旋转方法绘制了如下所示画面。

图 3. 清单 3 所示示例图形