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


Khóa học qua video:
Python 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ẽ được đường tròn trên <canvas>, ta sử dụng kết hợp hai phương thức sau:

Ø  Trước tiên dùng phương thức arc(x,y,r,start,stop) dùng để vẽ cung tròn

Ø  Rồi sau đó dùng phương thức stroke() dùng để vẽ đường tròn

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 draw2(){

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

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

if(i<2)

i+=0.1;

else

return;

ctx.beginPath();

ctx.arc(95,50,40,0,i*Math.PI);

ctx.stroke();

setTimeout("draw2();",200);

}

draw2();

</script>

</body>

</html>

 

» Tiếp: Vẽ hình tròn trên <canvas>
« Trước: Vẽ đường thẳng trên <canvas>
Khóa học qua video:
Python 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 !!!