您可以将形状移动到函数中,调用一次,然后使用另一个状态(save
, restore
)添加镜面效果(使用transform
or scale
+translate
)并再次调用它:
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();
See MDN:转换举些例子。