jquery - 如何使用css3/canvas沿着边缘旋转六边形

Question

我想旋转六边形但不知道如何...

感谢你帮助我!

Answer 1

这实际上是通过缩放而不是旋转完成的。

如果您从这张图片开始:

然后将其宽度缩放到其原始宽度的 50%，你会得到:

下面是关于如何将宽度缩放到 50% 的代码:

// move the canvas origin(0,0) to the center of the canvas

ctx.translate(canvas.width/2,canvas.height/2);

// scale the width to 50% of its original width

ctx.scale(0.50,1);

// finally draw the image, which will be scaled in width

ctx.drawImage(img,-img.width/2,-img.height/2);

所以要创建你的效果:

• 将橙色和紫色的六边形缩放到 50% 宽度
• 让他们靠得更近
• 在其他 2 个六边形之上绘制金色六边形