如何在HTML5画布中复制形状? [英] How do I duplicate a shape in HTML5's 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:转换示例。
这篇关于如何在HTML5画布中复制形状?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!