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/を使用してシェイプを直接描画し、キャンバスとしてエクスポートします。エクスポートされたページのソースを表示すると、それを取得するためのキャンバス スクリプトも表示されます。

上記の形状の場合、グリッド設定をグリッド オンおよび表示に変更して、直線が描画されることを確認します。フリーフォーム形状を選択し、クリックして線を開始し、線の終点でダブルクリックします。赤いコントロール ポイントをドラッグして、必要な形状を形成します。コントロール ポイントはグリッドにロックされませんが、配置する場所を判断するのに役立ちます。

以下は、これにより得られる 1 つの可能性を示しています。

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