HTML5: Vẽ hình tròn trên <canvas>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Để vẽ được hình 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 fill() 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 draw3(){

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.fill();

setTimeout("draw3();",200);

}

draw3();

</script>

</body>

</html>

Demo

» Tiếp: Vẽ chữ bằng <canvas>
« Trước: Vẽ đường tròn trên <canvas>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!