如何在HTML5的画布中复制形状?

时间:2012-06-02 14:20:09

标签: javascript html5 canvas html5-canvas

我正在尝试使用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();

1 个答案:

答案 0 :(得分:5)

您可以将形状移动到函数中,调用一次,然后使用其他状态(saverestore)添加镜像效果(使用transform或{{ 1}} + scale)并再次调用它:

translate

有关示例,请参阅MDN: Transformations