コメント：2つの形式があります。1つはストローク（塗りつぶし）で、もう1つは塗りつぶし（ストローク）です。特定の実装コードは次のとおりです。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。
まず、HTMLページにキャンバス要素を配置します。ここでは、Canvas要素には3つの属性ID、幅、および高さが必要です。<canvas> </canvas>
キャンバスオブジェクトを取得し、コンテキストを取得しますvar cxt = document.getElementById（ 'demo'）。getContext（2d）;ここで、パラメーター2Dが決定論的です。
描画を開始すると、2つの形式があります。1つはストロークで、もう1つはストロークです。
JavaScriptコード：
<スクリプト言語= "javascript">
var cxt = document.getElementById（ 'demo'）。getContext（ "2d"）;
cxt.beginpath（）;
cxt.fillstyle = "＃f00";/*塗りつぶし色*/
cxt.fillrect（0,0,200,100）;/*長方形を描く、最初の2つのパラメーターが開始位置を決定し、最後の2つはそれぞれ長方形の幅と高さです*/
cxt.beginpath（）;
cxt.strokestyle = "＃000";/*border*/*/*
cxt.linewidth = 3;/*border width*/
cxt.strokerect（0,120,200,100）;
cxt.beginpath（）;
cxt.moveto（0,350）;
cxt.lineto（100,250）;
cxt.lineto（200,300）;
cxt.closepath（）;/*オプションのステップ、描かれたパスを閉じます*/
cxt.stroke（）;
</script>
複製画像：