<strong>1. ブラシ スタイルをカスタマイズします</strong> <br><br>シェイプ マップに色を追加したい場合は、次の 2 つの重要な属性を使用する必要があります。 <br><br>fillStyle: すべての塗りつぶし操作のデフォルトの色を設定します。 <br>ストロークスタイル: すべてのストローク操作のデフォルトの色を設定します。 <br><br><strong>2. 色と透明度を指定して長方形を描画します</strong> <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode33'));"><u>コードをコピーします</u></span></div>コードは次のとおりです。 </div> <div class="msgborder" id="phpcode33"> <br> <br> content=" text/html; charset = "utf-8"> <br><title>HTML5</title> <br><script type="text/javascript" charset="utf-8"> 🎜>/ /この関数は、ページが完全にロードされた後に呼び出されます。 <br />function pageLoaded() <br />{ <br />//キャンバス オブジェクトへの参照を取得します。tCanvas 名は、以下の本文の id <br />var Canvas = document .getElementById('tCanvas'); <br />//キャンバスの 2D 描画環境を取得します<br />var context = Canvas.getContext('2d'); >//描画コードがここに表示されます<br />/ /塗りつぶしの色を赤に設定します<br />context.fillStyle = "red"; <br />//赤色の実線長方形を描画します<br />context.fillRect(50, 50,100,40); <br />//緑の場合のエッジの色を設定します <br />context.fillStyle = "green" <br />//緑の中空の四角形を描画します<br />context.ストロークRect(120,100,100,35); 🎜>//rgb() を使用して塗りつぶしの色を青に設定します <br />context.fillStyle = "rgb(0,0,255)" <br />//青の実線長方形を描画します<br />context.fillRect(80,230,100, 40); <br />//塗りつぶしの色を黒に設定し、アルファ値 (透明度) を 0.2 にします。 <br />context.fillStyle = "rgba(0,0,0,0.2)";透明な黒い四角形<br />context.fillRect(300,180,100,50 ); <br /></script> <br> <br> <br><canvas width="500" height="300" id="tCanvas" style="border:black 1px Solid;"> <br><!--ブラウザがサポートしていない場合、次のフォントが表示されます--> <br>ヒント: デバイスは <canvas> <br><br><br><br><br>3. 描画効果<br><br><br></canvas></canvas> </div>