Tô và vẽ nét canvas HTML
Tô và nét canvas
Để xác định màu tô và màu đường viền cho hình dạng/đối tượng trong canvas, chúng ta sử dụng các thuộc tính sau:
Tài sản | Sự miêu tả |
---|---|
fillStyle | Xác định màu tô của đối tượng/hình dạng |
strokeStyle | Xác định màu sắc của đường viền của đối tượng/hình dạng |
Thuộc tính fillStyle
Thuộc tính fillStyle
xác định màu tô của đối tượng.
Giá trị thuộc tính fillStyle
có thể là màu (tên màu, RGB, HEX, HSL), độ dốc hoặc mẫu.
Ví dụ
Đặt màu tô thành "xanh" và vẽ một hình chữ nhật được tô màu bằng phương thức fillRect()
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10,10, 100,100);
</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 viền.
Giá trị thuộc tính strokeStyle
có thể là màu (tên màu, RGB, HEX, HSL), độ dốc hoặc mẫu.
Ví dụ
Đặt màu đường viền thành "xanh lam" và vẽ một hình chữ nhật có đường viền bằng phương thức strokeRect()
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
Hãy tự mình thử »Kết hợp fillStyle và StrokeStyle
Việc kết hợp hai hình chữ nhật ở trên là hoàn toàn hợp pháp.
Ví dụ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// the filled rectangle
ctx.fillStyle = "green";
ctx.fillRect(10,10, 100,100);
// the outline rectangle
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
Hãy tự mình thử »fillStyle và StrokeStyle với Kênh Alpha
Bạn cũng có thể thêm kênh alpha vào cả thuộc tính fillStyle
và strokeStyle
để tạo độ mờ.
Ví dụ
Đặt độ mờ thành 50% cho cả thuộc tính fillStyle
và strokeStyle
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// the filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 50%)";
ctx.fillRect(10,10, 100,100);
// the outline rectangle
ctx.strokeStyle = "rgb(0 0 255 / 50%)";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
Hãy tự mình thử »