<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><!DOCTYPE html> <br><head> 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></head> <br><body onload="pageLoaded();" > <br><canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px Solid;"> <br><!--ブラウザがサポートしていない場合、次のフォントが表示されます--> <br>ヒント: デバイスは <canvas> <br></body< をサポートしていません。 /html><br><br><br><br>3. 描画効果<br><br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
