コメント: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>
複製画像: