このチュートリアルでは、Canvasで線を引く方法を学びます。

1.キャンバスに線を引く

直線には次のプロパティがあります。

• 開始位置、終了位置。
• 線の幅。
• 線の色
• 行の両端をフォーマットします。

直線を描く：

線を引くには、開始位置と終了位置を定義する必要があります。各位置は、左マージンからの距離と上マージンからの距離( trái, trên )によって決定されます。

 <canvas id="myCanvas" width="400" height="200"></canvas> <script> // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(490, 190); // Điểm kết thúc context.stroke(); // Tiến hành vẽ </script>

その中には：

• beginPath()関数を使用して改行を宣言します
• moveTo(position)関数を使用して、開始点を指定します。
• lineTo(position)を使用してエンドポイントを指定します
• 描画を続行するには、 stroke()関数を使用します。

線の幅と色：

線の幅を選択するには、 lineWidthプロパティを使用し、色を選択するには、 strokeStyleプロパティを使用します。

 // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(380, 180); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.stroke(); // Tiến hành vẽ

結果：

行の両端をフォーマットします。

ラインキャップとも呼ばれる直線の両端をフォーマットします。

ラインキャップをフォーマットするには、 lineCapプロパティを使用し、次の3つの値のいずれかになります。

• バット：ポイントで垂直、通常の寸法
• round ：丸みを帯びた、両端が丸みを帯びたセグメントを追加するため、通常より長くなります。
• 正方形：長方形のボード。長方形のセグメントの両端が2つ追加されているため、通常より長くなります。

 /*CANVAS THỨ NHẤT*/ var canvas = document.getElementById('myCanvas1'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ HAI*/ var canvas = document.getElementById('myCanvas2'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'pink';// Màu hồng context.lineCap = 'round'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ BA*/ var canvas = document.getElementById('myCanvas3'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'red';// Màu đỏ context.lineCap = 'square'; context.stroke(); // Tiến hành vẽ

2.キャンバスに連続した線を描画します

上記の例は線の描画で止まりますが、 lineTo()関数を使用して複数の線を連続して描画できます。

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(390, 10); // Điểm giữa context.lineTo(20, 190); // Điểm giữa context.lineTo(390, 190); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ

2.結論

したがって、線を描画するには、線の両端に2つの点を定義する必要があります。各線には、線の幅、線の色、線の両端の形式など、いくつかの追加のプロパティがあります。

このレッスンはここで終了します。次のレッスンでは、曲線の描画方法を学習します。