Javascript 如何在HTML5'；什么是帆布？

我有一个半复杂和水平对称的形状，我正试图建立使用HTML5。当我试图完成它的时候，我意识到如果我可以复制一半的形状，镜像它并移动它，将两个图像连接在一起，这会更容易。我正在寻找如何镜像和移动形状的示例，但没有找到如何复制形状的示例

显然，我希望我不需要两个单独的画布元素

以下是我的代码供参考：

var canvas = document.getElementById(id),
      context = canvas.getContext("2d"),
      color,
      height = 50;
      width = 564;
      arrowWidth = 40,
      arrowHeight = 15,
      arrowStart = height - arrowHeight,
      edgeCurveWidth = 50;

    if (parseInt(id.substr(-1), 10) % 2) {
      color = "#F7E5A5";
    } else {
      color = "#FFF";
    }

    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "#BAAA72";
    context.moveTo(0, 0);
    context.quadraticCurveTo(-10, arrowStart, edgeCurveWidth, arrowStart);
    context.quadraticCurveTo(width/2 - arrowWidth/2 - 15, arrowStart - 15, width/2 - arrowWidth/2, arrowStart);
    context.quadraticCurveTo(width/2, height, width/2, height);
    context.stroke();
    context.lineTo(width/2, 0);
    context.closePath();
    context.fillStyle = color;
    context.fill();

---

您可以将形状移动到函数中，调用一次，然后使用另一种状态（

保存

，

恢复

）添加镜像效果（使用

变换

或

缩放

+

翻译

），然后再次调用：

function drawHalfShape(context,width, height,arrowWidth,arrowHeight,edgeCurveWidth,color){
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "#BAAA72";
    context.moveTo(0, 0);
    context.quadraticCurveTo(-10, arrowStart, edgeCurveWidth, arrowStart);
    context.quadraticCurveTo(width/2 - arrowWidth/2 - 15, arrowStart - 15, width/2 - arrowWidth/2, arrowStart);
    context.quadraticCurveTo(width/2, height, width/2, height);
    context.stroke();
    context.lineTo(width/2, 0);
    context.closePath();
    context.fillStyle = color;
    context.fill();
}

var canvas = document.getElementById(id),
      context = canvas.getContext("2d"),
      color,
      height = 50;
      width = 564;
      arrowWidth = 40,
      arrowHeight = 15,
      arrowStart = height - arrowHeight,
      edgeCurveWidth = 50;

    if (parseInt(id.substr(-1), 10) % 2) {
      color = "#F7E5A5";
    } else {
      color = "#FFF";
    }

drawHalfShape(context,width,height,arrowWidth,arrowHeight,edgeCurveWidth,color);

context.save();
context.translate(-width/2,0); // these operations aren't commutative
context.scale(-1,0);           // these values could be wrong
drawHalfShape(context,width,height,arrowWidth,arrowHeight,edgeCurveWidth,color);
context.restore();

---

参见示例。

您可以将形状移动到函数中，调用一次，然后使用另一个状态（

保存

，

恢复

）添加镜像效果（使用

变换

或

缩放

+

转换

）并再次调用。请看@Zeta:你应该把你的答案写下来作为答案。@Ammar:我想我没有足够的时间来详细回答。在我提交答案之前，我想先测试一下我的答案，并提供一些演示。谢谢你，先生。我想我开始认为我应该算出形状另一半的坐标，摆脱这种复杂性：）