我正在尝试使用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();
答案 0 :(得分:5)
您可以将形状移动到函数中,调用一次,然后使用其他状态(save
,restore
)添加镜像效果(使用transform
或{{ 1}} + scale
)并再次调用它:
translate
有关示例,请参阅MDN: Transformations。