HTML5 キャンバスを使用して四角形を描画する方法: まず、対応する HTML サンプル ファイルを作成し、次に「canvas.getContext('2d'」などのコード ステートメントを使用して Canvas コンテキストの rect メソッドを通じて四角形を描画します。 );"。
HTML5 キャンバスを使用して四角形を描画するには、Canvas コンテキストの rect() メソッドを使用する必要があります。次に、具体的なコードの実装を見てみましょう。
具体的な例を見てみましょう
コードは次のとおりです
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var cx = 360; var cy = 400; var radius = 36; var context = canvas.getContext('2d'); context.beginPath(); context.rect(240, 80, 160, 80); context.fillStyle = 'peachpuff'; context.fill(); context.lineWidth = 2; context.strokeStyle = 'coral'; context.stroke(); } </script> </head> <body onload="draw()" style="background-color:#D0D0D0;"> <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas> <div>Canvas Demo</div> </body> </html>
手順:
Canves オブジェクトは document.getElementById() メソッドによって取得されます。Canves オブジェクトは getContext() メソッドを呼び出します。この処理は、キャンバスへの描画とともに処理されます。
コンテキストの beginPath() メソッドを呼び出してパスを開始します。長方形を描画するには、rect() を使用します。 Rect の最初のパラメータと Rect の 2 番目のパラメータは、長方形の左上隅の X、Y 座標です。 3 番目のパラメーターは描画された四角形の幅、4 番目のパラメーターは描画された四角形の高さです。
fill() メソッドを使用して内部を塗りつぶし、ストローク メソッドを使用して輪郭を描画します。
実行結果
Webブラウザを使用して、作成したHTMLファイルを実行します。以下のような効果が表示されます。
上の例の長方形は内部が塗りつぶされています。内部塗りつぶしのない長方形を見てみましょう。
コードは次のとおりです。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> <!-- /*背景色和背景图*/ .canvas{ background-color:#FFFFFF; background-image: url("img/t.jpg"); } --> </style> <script type="text/javascript"> function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var cx = 360; var cy = 400; var radius = 36; var context = canvas.getContext('2d'); context.beginPath(); context.rect(240, 80, 160, 80); context.lineWidth = 4; context.strokeStyle = 'coral'; context.stroke(); } </script> </head> <body onload="draw()" style="background-color:#D0D0D0;"> <canvas id="SimpleCanvas" width="640" height="480" class="canvas"></canvas> <div>Canvas Demo</div> </body> </html>
注: 画像を描画するときに、fill() メソッドを呼び出さず、ストローク() メソッドのみを実行すると、内部を塗りつぶさずに四角形を描画できます。
実行結果
ブラウザ上には以下のような効果が表示されます
最後に内部を直接埋める長方形の描画を見てみましょう
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var cx = 360; var cy = 400; var radius = 36; var context = canvas.getContext('2d'); context.beginPath(); context.rect(260, 120, 220, 120); context.fillStyle = 'burlywood'; context.fill(); } </script> </head> <body onload="draw()" style="background-color:#D0D0D0;"> <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas> <div>Canvas Demo</div> </body> </html>
実行結果は次のとおりです
以上がHTML5キャンバスを使用して長方形を描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。