Để vẽ một đường thẳng sử dụng HTML5 Canvas, chúng ta dùng các phương thức moveTo(), lineTo() và stroke()

Đầu tiên trong chúng ta đặt thẻ Canvas vào trong body

<canvas id="myCanvas" width="578" height="200"></canvas>
 

1
2
3
4
5
6
7
8

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(100, 150);  // moveTo(x,y)
    context.lineTo(450, 50); //(lineTo(x,y))
    //context.lineWidth = 15; // Độ rộng cho đường thẳng
    //context.strokeStyle = "#ff0000"; // Màu của đường thẳng
    
    context.stroke();
};

Giải thích các dòng trên:

moveTo(): Đưa con chuột về vị trí được chỉ định (x:100x, y:150px)

lineTo(): vẽ một đường thẳng tới vị trí được chỉ định. Trong ví dụ trên lineTo() vẽ một đường thẳng từ vị trí moveTo chỉ định tới vị trí

stroke() gán màu cho đường đã vẽ, nếu không được chỉ định nó sẽ được mặc định là màu đen.

 

Kết Quả:

 

Để gắn bo tròn cho hai đầu của đường thẳng bạn có thể tham khảo bài viết về lineCap tại đây.