html - キャンバスのカスタムシェイプ?

Question

html5 canvas で「ベジェ曲線」または「二次曲線」を使用して形状を作成する方法はありますか? または、キャンバスにポリゴンを描画する方法はありますか

Answer 1

ポリゴンの場合、次を使用できます（ctxはキャンバスのgetContext（ '2d'））：

ctx.fillStyle=*hex code of the color you want it to be";
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
*add more points if needed using a lineTo(x,y) for each of your points*
ctx.closePath();
ctx.fill();

ストロークポリゴンが必要な場合は、ctx.fillStyleとctx.fill（）の代わりにctx.strokeStyleとctx.stroke（）を使用します。

Answer 2

確かにできます。少なくとも次のものがあります。

• quadraticCurveTo
• bezierCurveTo

このサンプル コードを見てください。

http://www.html5canvastutorials.com/labs/html5-canvas-playing-card-suits/