In questo tutorial impareremo come disegnare una linea in Canvas.

1. Disegna linee su tela

Una retta avrà le seguenti proprietà:

• Posizione iniziale, posizione finale.
• Larghezza della linea.
• Colore della linea
• Formatta le due estremità della linea.

Disegna una linea retta:

Per tracciare una linea dobbiamo definire la posizione iniziale e la posizione finale, ogni posizione sarà determinata dalla distanza dal margine sinistro e dalla distanza dal margine superiore ( 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>

In esso abbiamo :

• Usa la funzione beginPath() per dichiarare una nuova riga
• Utilizzare la funzione moveTo(position) per specificare il punto iniziale.
• Utilizzare lineTo(position) per specificare il punto finale
• Utilizzare la funzione stroke() per procedere con il disegno.

Larghezza e colore della linea:

Per selezionare la larghezza della linea utilizziamo la proprietà lineWidth , per selezionare il colore utilizziamo la proprietà 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ẽ

Risultato:

Formatta le due estremità della linea:

Formatta le due estremità di una linea retta, nota anche come Line Cap.

Per formattare la linea Cap, utilizziamo la proprietà lineCap e avrà uno dei seguenti tre valori:

• butt : perpendicolare al punto, ha dimensione normale
• round : arrotondato, più lungo del solito perché le due estremità aggiungono un segmento arrotondato.
• quadrato : tavola rettangolare, più lunga del solito a causa delle due estremità aggiuntive del segmento rettangolare.

 /*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. Disegna linee consecutive in Canvas

Gli esempi precedenti si limitano a disegnare una linea, ma puoi disegnare più linee di seguito usando la funzione 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. Conclusione

Quindi per disegnare una linea, dobbiamo definire due punti alle due estremità della linea, ogni linea avrà alcune proprietà aggiuntive come la larghezza della linea, il colore della linea e il formato delle due estremità della linea.

Questa lezione finisce qui, la prossima impariamo come disegnare le Curve.