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

2022-01-17 00:00:00 canvas javascript html html5-canvas

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

I have a semi-complex and horizontally symmetrical shape I am trying to build using HTML5. While I was trying to finish it I realized it would be easier if I could just duplicate half of the shape, mirror it and move it to join the two images together. I'm finding examples of how to mirror and move a shape, but not on how to duplicate it.

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

Obviously, I'm hoping I won't need two separate canvas elements.

这是我的参考代码:

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

推荐答案

你可以把你的形状移动到一个函数中，调用一次，然后使用另一个状态(save，restore)添加镜像效果(使用transform或scale+translate)并再次调用:

You could just move your shape into a function, call it once, and then use another state (save, restore) to add a mirror effect (using transform or scale+translate) and call it again:

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

有关示例，请参阅 MDN:转换.

相关文章