Vẽ hình cung với Cavas arc
Sat, 12/03/2011 - 10:15 | 
Để vẽ hình cung với HTML5 Canvas, chúng ta có thể sử dụng phương thức arc().
Cú pháp:
1 2 |
context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise); |
Ngoài ra, để vẽ đường bo tròn cho một hình vuông chúng ta có thể dùng arcTo().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = 288; var centerY = 160; var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI; var counterclockwise = false; context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 15; context.strokeStyle = "black"; // line color context.stroke(); }; |
Nhìn vào hình trên chúng ta có thể thấy rằng để vẽ đường cung trước tiên cần chỉ đinh trục x và y của tâm (centerX, centerY), radius xác định chiều dài bán kính. startingAngle: điểm bắt đầu, endingAngle: vị trí kết thúc của hình cung. Bạn hãy thử cho startingAngle=0 và endingAngle = Math.PI*2 nó sẽ ra hình tròn.
Tham số cuối cùng antiClockwise: định nghĩa chiều để vẽ, nếu không truyền vào một giá trị thì mặc định nó sẽ là false (theo chiều kim đồng hồ), và ngược lại true (ngược chiều kim đồng hồ).
Kết quả:
giancon's blog | 
Login or register to post comments | 
Tags: arc, canvas, Canvas 2d, HTML5, HTML5 Canvas tutorial .jpg)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// bắt đầu vẽ mặt người
ctx.beginPath();
ctx.arc(200, 100, 90,0, Math.PI * 2,false); // tâm x 200, tâm y 100, bán kính 90px
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.stroke(); // vẽ đường viền
ctx.fillStyle="white"; // màu nền
ctx.fill(); // tô màu nền cho mặt người
// vẽ mắt trái
ctx.beginPath();
ctx.arc(150,70,10,0,Math.PI * 2, false);
ctx.lineWidth = 1;
ctx.stroke();
//vẽ tròng mắt trái
ctx.beginPath();
ctx.arc(154,72,4,0,Math.PI * 2, false);
ctx.lineWidth = 1;
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();
// vẽ mắt phải
ctx.beginPath();
ctx.arc(250,70,10,0,Math.PI * 2, false);
ctx.stroke();
//vẽ tròng mắt phải
ctx.beginPath();
ctx.arc(246,72,4,0,Math.PI * 2, false);
ctx.lineWidth = 1;
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();
// vẽ miệng cười
ctx.beginPath();
ctx.strokeStyle = "pink";
ctx.lineWidth = 5;
ctx.lineCap = "round"; // bo tròn hai đầu miệng =.=
ctx.arc(200, 0, 150, 0.4 * Math.PI, 0.6 * Math.PI, false);
ctx.stroke();
};