Hình dạng canvas HTML
Hình dạng vải
Để vẽ các hình dạng khác nhau bao gồm các đường thẳ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 hình trong khung vẽ (không vẽ) | KHÔNG |
lineTo(x,y) | Đặt điểm phụ hoặc điểm cuối của hình trong khung vẽ (không cần vẽ) | KHÔNG |
stroke() | Vẽ đường thẳng (từ điểm đầu, qua các điểm phụ và đến điểm cuối). Màu nét mặc định là màu đen | Đúng |
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// Set start-point
ctx.moveTo(20,20);
// Set sub-points
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
// Set end-point
ctx.lineTo(20,20);
// Stroke it (do the drawing)
ctx.stroke();
</script>
Hãy tự mình thử » Thêm ví dụ
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
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 nét.
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();
// Define a rectangle
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Define a triangle
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
Hãy tự mình thử »