Computer >> Máy Tính >  >> Lập trình >> HTML

Phương thức canvas stroke () HTML

Phương thức stroke () của canvas HTML được sử dụng để vẽ đường dẫn. Đường dẫn này được vẽ bằng phương thức moveTo () và lineTo (). Phần tử cho phép bạn vẽ đồ họa trên trang web bằng JavaScript. Mỗi canvas đều có hai phần tử mô tả chiều cao và chiều rộng của canvas, tức là chiều cao và chiều rộng tương ứng.

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

ctx.stroke()

Bây giờ chúng ta hãy xem một ví dụ để triển khai phương thức stroke () của canvas -

Ví dụ

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="450" height="350" style="border:2px solid red;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(100, 200);
   ctx.lineTo(100, 100);
   ctx.strokeStyle = "blue";
   ctx.stroke();
   ctx.beginPath();
   ctx.moveTo(30, 30);
   ctx.lineTo(20, 100);
   ctx.lineTo(70, 100);
   ctx.strokeStyle = "orange";
   ctx.stroke();
</script>
</body>
</html>

Đầu ra

Phương thức canvas stroke () HTML