Đối tượng Canvas DOM HTML

Đối tượng HTML DOM Canvas được liên kết với phần tử

Thuộc tính

Sau đây là các thuộc tính cho Đối tượng Canvas -

Thuộc tính	Mô tả
fillStyle	Để đặt hoặc trả lại màu, độ dốc hoặc mẫu được sử dụng để tô bản vẽ.
strokeStyle	Để đặt hoặc trả lại màu, độ dốc hoặc mẫu được sử dụng cho các nét vẽ.
shadowColor	Để đặt hoặc trả lại màu được sử dụng cho bóng đổ.
shadowBlur	Để đặt hoặc trả lại mức độ mờ của bóng.
shadowOffsetX	Để đặt hoặc trả lại khoảng cách ngang của bóng so với hình dạng.
shadowOffsetY	Để đặt hoặc trả lại khoảng cách thẳng đứng của bóng từ hình dạng.

Phương thức

Sau đây là các phương thức của đối tượng Canvas -

Phương pháp	Mô tả
createLinearGradient ()	Để tạo gradient tuyến tính.
createPattern ()	Để tạo một mẫu bằng cách lặp lại một phần tử được chỉ định theo một hướng.
shadowColor	Để đặt hoặc trả lại màu được sử dụng cho bóng đổ.
createRadialGradient ()	Để tạo gradient hình tròn.
addColorStop ()	Để đặt hoặc trả lại khoảng cách ngang của bóng so với hình dạng.

Cú pháp

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

Tạo đối tượng canvas -

var x=document.createElement("CANVAS");

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng canvas DOM HTML -

<!DOCTYPE html>
<html>
<head>
<style>
   canvas {
      border: 1px double blue;
      margin:1em;
   }
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
   function createCanvas() {
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      ctx.fillStyle = "#C7EA46";
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      document.body.appendChild(x);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng Canvas DOM HTML

Khi nhấp vào TẠO -

Đối tượng Canvas DOM HTML

Trong ví dụ trên -

Đầu tiên chúng tôi đã tạo một nút CREATE, nút này khi được nhấp vào sẽ thực thi phương thức createCanvas ().

<button onclick="createCanvas()">CREATE</button>

Phương thức createCanvas () tạo một phần tử

Sau đó, sử dụng phương thức arc () để xác định tọa độ của đường tròn và tô màu đường tròn đó bằng màu tô. Cuối cùng, chúng tôi sử dụng phương thức stroke () để thực sự vẽ trên canvas và nối canvas làm phần tử con của phần tử body bằng phương thức appendChild () của document.body -

function createCanvas() {
   var x = document.createElement("CANVAS");
   var ctx = x.getContext("2d");
   ctx.fillStyle = "#C7EA46";
   ctx.beginPath();
   ctx.arc(100, 75, 50, 0, 2 * Math.PI);
   ctx.fill();
   ctx.stroke();
   document.body.appendChild(x);
}