Phương thức stroke() của Canvas HTML

Giới thiệu

Phương thức stroke() của HTML Canvas vẽ đường viền (stroke) theo đường dẫn (path) hiện tại. Đường dẫn được tạo bằng moveTo(), lineTo(), arc(), v.v. Màu viền do strokeStyle quyết định.

Cú pháp

ctx.stroke()

Ví dụ minh họa

<!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");
    // Đường thẳng dọc xanh
    ctx.beginPath();
    ctx.moveTo(100, 200);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "blue";
    ctx.stroke();
    // Tam giác cam
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(20, 100);
    ctx.lineTo(70, 100);
    ctx.strokeStyle = "orange";
    ctx.stroke();
  </script>
</body>
</html>

Kết quả hiển thị

Một đoạn thẳng dọc màu xanh và một tam giác màu cam (chỉ viền).