Dòng Canvas HTML
Vẽ đường canvas
Để vẽ một đường trong canvas, chúng ta sử dụng các phương pháp sau:
Phương pháp | Sự miêu tả | Hòa |
---|---|---|
beginPath() | Tuyên bố rằng chúng ta sắp vẽ một con đường mới (không cần vẽ) | KHÔNG |
moveTo(x,y) | Đặt điểm bắt đầu của dòng trong khung vẽ (không vẽ) | KHÔNG |
lineTo(x,y) | Đặt điểm cuối của dòng trong khung vẽ (không vẽ) | KHÔNG |
stroke() | Vẽ đường. Màu nét mặc định là màu đen | Đúng |
Ví dụ
Xác định điểm bắt đầu ở vị trí (0,0) và điểm cuối ở vị trí (200.100). Sau đó sử dụng stroke()
để vẽ đường thẳng:
<script>
// Create a Canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Define a new path
ctx.beginPath();
// Set a start-point
ctx.moveTo(0, 0);
// Set an end-point
ctx.lineTo(200, 100);
// Stroke it (Do the Drawing)
ctx.stroke();
</script>
Hãy tự mình thử » Thuộc tính lineWidth
Thuộc tính lineWidth
xác định độ rộng của dòng.
Nó phải được thiết lập trước khi gọi phương thức stroke()
.
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();
</script>
Hãy tự mình thử »Thuộc tính StrokeStyle
Thuộc tính strokeStyle
xác định màu của đường thẳng.
Nó phải được thiết lập trước khi gọi phương thức stroke()
.
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
Hãy tự mình thử »Thuộc tính lineCap
Thuộc tính lineCap
xác định kiểu chữ hoa của dòng ("mông", "tròn" hoặc "vuông").
Mặc định là "mông".
Nó phải được thiết lập trước khi gọi phương thức stroke()
.
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();
</script>
Hãy tự mình thử »