HTML5: Vẽ hình tròn trên <canvas>
Để 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>