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


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