javascript - 不了解此 Canvas 代码的工作原理

Question

我正在玩 Canvas 代码。我写了一个画出路径的函数

  function draw_faces() {
    var canvas = document.getElementById("faces_bkgd");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      var happy_face = new Path2D();
      happy_face.rect(10,10,100,100);
      ctx.fillStyle = "rgb(0,0,200)";
      ctx.fill(happy_face);

      happy_face.moveTo(50,50);
      happy_face.lineTo(90,90);
      happy_face.lineTo(90,50);

      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fill(happy_face);

      ctx.save();
      ctx.translate(50,50);
      ctx.fillStyle="rgb(0,200,0)";
      ctx.fill(happy_face);
      ctx.restore();
    }

fiddle demo

它在页面左上角给出了以下输出，其中有一个带有蓝色三 Angular 形的红色正方形。在红色方 block 的底部，有一个重叠的绿色方 block ，上面有一个三 Angular 形切口。

为什么它是一个带有三 Angular 形切口的绿色正方形而不是带有蓝色三 Angular 形的绿色正方形？

另外，你们用什么在 Web Inspector for Safari 上调试 Canvas？

Answer 1

编辑:我创建了一些图像来逐步解释正在发生的事情。如果您希望我更详细地介绍，请告诉我。如果有某些部分你不明白，请告诉我。如果有没有意义的术语(方法等)让我知道。有什么不明白的就告诉我。 :)

---

以下是您编写代码的重要部分，其中包含对实际情况的评论。

代码的第一部分绘制了一个蓝色方 block ，其中包含一个您已定义为矩形的 Path2D 实例。

     var happy_face = new Path2D();
     happy_face.rect(10, 10, 100, 100);
     ctx.fillStyle = "rgb(0,0,200)";
     ctx.fill(happy_face);

然后不是创建 Path2D 的新实例，而是使用之前的变量 happy_face，它仍然定义为 rect，现在您切出一个三 Angular 形并将颜色设置为红色并绘制它。

     //The moveTo and lineTo cut out a triangle in your square.
     happy_face.moveTo(50, 50);
     happy_face.lineTo(90, 90);
     happy_face.lineTo(90, 50);

     ctx.fillStyle = "rgb(200,0,0)";
     ctx.fill(happy_face);

由于您没有移动这个切出三 Angular 形的正方形，所以您在蓝色正方形的顶部绘制。这给人的印象是您切出的三 Angular 形是蓝色的，但那只是下面的旧正方形。

将忽略保存和恢复方法，因为它们没有做任何有值(value)的事情。然后你做一个 tanslate.. 它只是将指针从你开始绘制的地方从 (0,0) 移动到 (50, 50)。在这一点上，您将颜色从红色更改为绿色，并开始在 (50, 50) happy_face(切出一个三 Angular 形的旧正方形)处绘制。

  ctx.save();
  ctx.translate(50,50);
  ctx.fillStyle="rgb(0,200,0)";
  ctx.fill(happy_face);
  ctx.restore();

不幸的是你不能首次亮相“ Canvas ”。因为当你画东西的时候，你不能只是移动它。它实际上是画在 Canvas 上的。如果您在另一个正方形之上绘制一个正方形，那么之前的正方形就会丢失。