HTML canvas fillStyle Property

Thuộc tính fillStyle () của canvas HTML được sử dụng để đặt màu hoặc gradient hoặc mẫu cho bản vẽ. Giá trị mặc định là # 000000. Phần tử

Sau đây là cú pháp -

ctx.fillStyle=color|gradient|pattern;

Ở trên, các giá trị, bao gồm -

màu sắc: Màu tô của bản vẽ, là màu CSS.
gradient: Đối tượng gradient tuyến tính hoặc xuyên tâm để lấp đầy bản vẽ
mẫu: Đối tượng hoa văn để điền vào bản vẽ.

Bây giờ chúng ta hãy xem một ví dụ để triển khai thuộc tính fillStyle () của canvas -

Ví dụ

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   var newGrad =ctx.createLinearGradient(0, 0, 130, 0);
   newGrad.addColorStop(0, "blue");
   newGrad.addColorStop(0.8, "green");
   ctx.fillStyle = newGrad;
   ctx.fillRect(0, 0, 500, 350);
</script>
</body>
</html>

Đầu ra

HTML canvas fillStyle Property