在画布html5中绘制自定义形状

Question

有人可以帮我在画布上画这个形状吗？

感谢任何帮助！

Answer 1

您可以尝试quadraticCurveTo（https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes）

以下是一个示例：http://jsfiddle.net/V9sVY/

Answer 2

要绘制任何自定义形状，请使用此网站http://canvimation.github.com/直接绘制形状并将其导出为画布。查看导出页面的来源还将显示用于获取它的画布脚本。

对于上述形状，将网格设置更改为网格并显示以确保您将绘制一条直线。选择自由形状，单击以开始一条线，然后双击该行的末尾。拖动红色控制点以形成需要形状。控制点不会锁定到网格，但可以帮助您确定放置它们的位置。

以下显示了这样做的一种可能性。

           ctx.beginPath();
           ctx.moveTo(167,196);
           ctx.bezierCurveTo(217,98,418,99,467,196);
           ctx.bezierCurveTo(414,296,218,295,167,196);
           ctx.closePath();
           ctx.stroke();