不明白這個畫布代碼是如何工作的

Question

我正在玩Canvas Code。 我寫了一個繪制路徑的函數

  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();
    }

小提琴演示

它在頁面的左上角給出了以下輸出，其中有一個藍色三角形的紅色正方形。 在紅色方塊的底部，有一個帶有三角形切口的重疊綠色正方形。

為什么它是一個帶有三角形切口的綠色正方形而不是帶有藍色三角形的綠色正方形？

另外，你們在Web Inspector for Safari上使用什么來調試Canvas？

Answer 1

編輯：我創建了一些圖像逐步解釋發生了什么。 如果您希望我詳細了解請告訴我。 如果有某些部分你不明白，請告訴我。 如果有條款（方法等）沒有意義，請告訴我。 任何模糊的事都讓我知道。 :)

---

以下是您編寫代碼的重要部分，並對正在發生的事情發表評論。

代碼的第一部分繪制了一個藍色方塊，其中包含一個已定義為rect的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 ，現在切出一個三角形並將顏色設置為紅色並繪制它。

     //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);

由於你沒有移動這個方形，並在其中切出一個三角形，你可以在藍色方塊的頂部繪制。 這給人的印象是你切出的三角形是藍色的，但那只是下面的舊方塊。

要忽略保存和恢復方法，因為它們沒有做任何有價值的事情。 然后你做一個tanslate ..它只是將指針從你開始繪制的地方從（0,0）移動到（50,50）。 在這一點上，您將顏色從紅色更改為綠色，然后開始繪制（50,50）happy_face（舊方塊中切出三角形）。

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

不幸的是你無法首次亮相“畫布”。 因為當你畫一些東西時，你不能只是移動它。 它實際上是在畫布上繪制的。 如果你在另一個正方形的頂部畫一個正方形，那么之前的正方形就會丟失。