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

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

三角形を描く

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

4. "UTF-8">
6. 頭>
10. "myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
お使いのブラウザは Canvas タグをサポートしていません。
キャンバス>
"text/javascript">
15. //Canvas オブジェクト (canvas) を取得します
16. var Canvas = document.getElementById("myCanvas");
//HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
if
18. (canvas.getContext){
//対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
var
20. ctx = Canvas.getContext("2d");
//新しい描画パスを開始
22. ctx.beginPath();
//線の色を青に設定します
24. ctx.ストロークスタイル =
"青"
25. ; //パスの始点座標を設定します
26. ctx.moveTo(20, 50);
27. //座標点(60, 50)まで直線を描画
28. ctx.lineTo(20, 100);
29. //座標点(60, 90)まで直線を描画
30. ctx.lineTo(70, 100);
31. //まず描画パスを閉じます。現在のエンドポイントと開始エンドポイントを結ぶために直線が使用されることに注意してください。
32. ctx.closePath();
33. //最後に描画パスに従って直線を描きます
34. ctx.ストローク();
}