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

Question

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

任何帮助表示赞赏！

Answer 1

你可以试试 quadraticCurveTo ( https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes )

这是一个例子：http: //jsfiddle.net/V9sVY/

Answer 2

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

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

以下显示了通过这样做获得的一种可能性。

           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();