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

fiddle demo

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

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

另外，你们在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，仍然定义为 rect ，现在您剪切出一个三角形并设置颜色红色并绘制它。

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

不幸的是，你无法首次亮相＆＃34;画布＆＃34;。因为当你画东西时，你不能移动它。它真的画在画布上。如果你在另一个正方形的顶部画一个正方形，那么之前的正方形就会丢失。

不明白这个画布代码是如何工作的

1 个答案: