05-キャンバスは、三角形の簡単な図形を描画します

1  <！DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < タイトル> 05-キャンバス简单图形</ タイトル> 
6      < スタイル> 
7          * { 
8              マージン：0 ; 
9              パディング：0 。
10          } 
11枚の         キャンバス{ 
12             表示：ブロック、
13は             マージン：0自動; 
14              背景：赤; 
15          } 
16      </ スタイル> 
17  </ ヘッド> 
18である < ボディ> 
19  < キャンバス幅= "500" 高さ= "500" > </ キャンバス> 
20  < スクリプト> 
21である     / * 
22である     1.closePath
 さ23      に自動的に経路の出発点に現在のポイントバックから作成された
 24 
25      2.lineJoin
 26はれる     交差ラインパターンは、ラウンド、ベベルマイター変曲点（デフォルト）も提供される
 27      * * / 
28      LET oCanvas = document.querySelector（" キャンバス" ;）
 29      LET oCtx = oCanvas.getContext（" 2D " ）;
 30      oCtx.moveTo（50 、50 ）;
 31である     oCtx.lineTo（200は、50 ）;
 32      oCtx.lineTo（200であり、200である）;
 33である     。// 注意：パターンのlineToによって閉鎖されている場合、それは十分に閉じていません
34は     // oCtx.lineTo（50、50）; 
35      oCtx.closePath（）;
 36      oCtx.lineWidth =  20である;
 37      // oCtx.lineJoin = "ラウンド"; 
38は     oCtx.lineJoin = " ベベル" ;
 39      // oCtx = .lineJoin "マイターある"; 
40      // NOTEポイント：デフォルト自動的に開始点に最後の点から接続していない
41がある     oCtx.stroke（）;
 42がある </ スクリプト> 
43である </ ボディ> 
44である </ HTML >