HTML5: Vẽ đường thẳng trên <canvas>


Khóa học qua video:
Lập trình Python All C# Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Để vẽ đường thẳng trên <canvas> thì trước tiên ta sử dụng hai phương thức sau đây:

Ø  Phương thức moveTo(x,y) dùng để xác định điểm bắt đầu của đường thẳng

Ø  Phương thức lineTo(x,y) dùng để xác định điểm kết thúc của đường thẳng cần vẽ

Sau đó ta sử dụng phương thức stroke() để vẽ nét cho đường thẳng.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var i=0;

function draw(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

if(i<200)

i++;

else

return;

ctx.lineTo(i,i/2);

ctx.stroke();

setTimeout("draw();",50);

}

draw();

</script>

</body>

</html>

 

» Tiếp: Vẽ đường tròn trên <canvas>
« Trước: Vẽ chữ nhật trên <canvas>
Khóa học qua video:
Lập trình Python All C# Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!