HTML5 で三角形や四角形などの多角形を描画する方法 Canvas_html5 チュートリアルのヒント-H5 チュートリアル-php.cn

HTML5 Canvas を使用してポリゴンを描画するために必要な CanvasRenderingContext2D オブジェクトの主なプロパティとメソッド (() が付いたものはメソッド) は次のとおりです。

三角形を描く

JavaScript コードコンテンツをクリップボードにコピーします

"UTF-8">
HTML5 キャンバス描画トライアングル入門例
<キャンバス ID="myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
"text/javascript">
//Canvas オブジェクト (canvas) を取得します
var Canvas = document.getElementById("myCanvas");
(canvas.getContext){
ctx = Canvas.getContext("2d");
ctx.beginPath();
ctx.ストロークスタイル =
; //パスの始点座標を設定します
ctx.moveTo(20, 50);
//座標点(60, 50)まで直線を描画
ctx.lineTo(20, 100);
//座標点(60, 90)まで直線を描画
ctx.lineTo(70, 100);
//まず描画パスを閉じます。現在のエンドポイントと開始エンドポイントを結ぶために直線が使用されることに注意してください。
ctx.closePath();
//最後に描画パスに従って直線を描きます
ctx.ストローク();
対応する表示効果は次のとおりです:

四角形の描画
Canvas の四角形描画を個別に説明する理由は、Canvas ブラシツールの CanvasRenderingContext2D オブジェクトが四角形を描画するための専用メソッドを提供するためです。
XML/HTML コードコンテンツをクリップボードにコピー
1. >
2. <html>
3. <頭>
4. <メタ charset="UTF- 8">
5. <title>HTML5 キャンバス描画四角形の入門例< / タイトル>
6. 頭>
7. <ボディ>
10. <キャンバス id="myCanvas" 幅="400px" 高さ="300px" style="ボーダー: 1px 単色赤;">
11. お使いのブラウザは Canvas タグをサポートしていません。
12. キャンバス>
14. <スクリプト type="text/ javascript">
15. //Canvas オブジェクト (キャンバス) を取得します
16. var canvas = ドキュメント.getElementById("myCanvas");
20. ctx = canvas.getContext("2d");
21. //新しい描画パスを開始
22. ctx.beginPath();
23. //線の色を青に設定します
25. = "青"; //キャンバス上の座標点(10,10)を描画開始点として、幅80px、高さ50pxの長方形を描画します
33. >
34. >
35. > 対応する長方形エフェクトは次のように表示されます: