Phần tử Canvas trong HTML5
Ph n t Canvas trong HTML5ầ ử
Ph n tầ ử <canvas> trong HTML đ c s d ng đ v đ h a cho trang ượ ử ụ ể ẽ ồ ọ
web. V y canvas có nh ng n i dung gì, cách s d ng ra sao, b n hãy cùng ậ ữ ộ ử ụ ạ
Quantrimang tìm hi u qua bài vi t này nhé.ể ế
Canvas là gì?
Ph n t <canvas>ầ ử s d ng đ v các thành ph n đ h a t đ n gi n nhử ụ ể ẽ ầ ồ ọ ừ ơ ả ư
các đ ng đ n các đ h a ph c t p (đ ng th ng, hình h p, hình tròn, ườ ế ồ ọ ứ ạ ườ ẳ ộ
vi t ch , chèn hình nh...).ế ữ ả
<canvas> cũng t ng t nh nh ng th HTML khác, đ s d ng thì b n ươ ự ư ữ ẻ ể ử ụ ạ
ph i đ t thả ặ ẻ <canvas></canvas> t i v trí mu n hi n th . Tuy nhiên có ạ ị ố ể ị
m t s khác bi t rõ r t nh t là n i dung c a nó l i đ c xây d ng ộ ự ệ ệ ấ ộ ủ ạ ượ ự
từ Javascript.
<canvas> ch có ch c năng ch a các đ i t ng đ h a. B n b t bu c ph iỉ ứ ứ ố ượ ồ ọ ạ ắ ộ ả
s d ng JavaScript đ v .ử ụ ể ẽ
Trình duy t h trệ ỗ ợ
4.0 2.0 9.0 9.0 3.1
T a đ trong canvasọ ộ
Canvas s d ng tr c t a đ 2 chi u, v i góc trái phía trên là t a đ g c ử ụ ụ ọ ộ ề ớ ọ ộ ố
(0,0)
X : t a đ theo ph ng n m ngang, tăng d n t trái sang ph iọ ộ ươ ằ ầ ừ ả
Y : t a đ theo ph ng th ng đ ng, tăng d n t trên xu ng d iọ ộ ươ ẳ ứ ầ ừ ố ướ
Khai báo Canvas
Canvas là m t vùng hình ch nh t trên m t trang HTML. Theo m c đ nh, ộ ữ ậ ộ ặ ị
m t canvas không đ ng biên và không ch a n i dung.ộ ườ ứ ộ
Code khai báo m t ph n t canvas:ộ ầ ử
<canvas id="myCanvas" width="200" height="100"></canvas>
Chú ý: Luôn luôn đ t thu c tínhặ ộ id (đ có th g i trong script), thu c ể ể ọ ộ
tính width và heightđ đ t kích th c c a canvas. N u không đ c ch ra ể ặ ướ ủ ế ượ ỉ
kích th c, thì kích th c m c đ nh làướ ướ ặ ị 300px chi u r ng vàề ộ 150px chi u ề
cao.
Đ thêm đ ng vi n, s d ng thu c tính style nh sau:ể ườ ề ử ụ ộ ư
<canvas id="myCanvas" width="500" height="200" style="border:1px solid
#000000;">
</canvas>
K t qu :ế ả
M t s l nh v <canvas>ộ ố ệ ẽ
V đ ng th ng trong Canvasẽ ườ ẳ
Đ v đ ng th ng trên m t đ i t ng canvas, ta s dùng hàm sau:ể ẽ ườ ẳ ộ ố ượ ẽ
moveTo(x,y): xác đ nh đi m b t đ uị ể ắ ầ
lineTo(x,y): xác đ nh đi m k t thúcị ể ế
Th ng đ v các đ ng đ u tiên ta g iườ ể ẽ ườ ầ ọ beginPath() đ kh i t o m t path ể ở ạ ộ
m i (nó ch a t p h p các l nh đ ng c n v ).ớ ứ ậ ợ ệ ườ ầ ẽ
Cu i cùng đ th c hi n v t p đó g i hàmố ể ự ệ ẽ ậ ọ stroke()
Ví dụ
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid
#8080ff;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Đ ng th nh tườ ứ ấ
ctx.beginPath(); // Khai báo v đ ng th ng m iẽ ườ ẳ ớ
ctx.moveTo(0,0); // Xác đ nh đi m b t đ uị ể ắ ầ
ctx.lineTo(500,200); // Xác đ nh đi m k t thúcị ể ế
ctx.strokeStyle = 'red' // Màu c a đ ng th ngủ ườ ẳ
ctx.stroke(); // Ti n hành vế ẽ
// Đ ng th haiườ ứ
ctx.beginPath(); // Khai báo v đ ng th ng m iẽ ườ ẳ ớ
ctx.moveTo(0,200); // Xác đ nh đi m b t đ uị ể ắ ầ
ctx.lineTo(250,100); // Xác đ nh đi m k t thúcị ể ế
ctx.strokeStyle = 'brown' // Màu c a đ ng th ngủ ườ ẳ
ctx.lineWidth = 3; //Đ r ngộ ộ
ctx.stroke(); // Ti n hành vế ẽ
</script>
</body>
</html>
K t qu thu đ cế ả ượ
V cung tròn - hình tròn trong Canvasẽ
Đ v cung tròn - hình tròn, ta dùng l nh:ể ẽ ệ arc(x,y,r,start,stop)
x và y: t a đ tâmọ ộ
r: là bán kính
start: là góc b t đ uắ ầ
end: là góc k t thúcế
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="200" style="border:1px solid
teal;background: LightYellow"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Cung tròn 1
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI, 0); // T a đ tâm (100,100), bán kính 90ọ ộ
ctx.strokeStyle = 'steelblue'; // Màu c a đ ngủ ườ
ctx.lineWidth = 5; //Đ r ngộ ộ
ctx.stroke();
// Hình tròn
ctx.beginPath();
ctx.arc(300, 100, 90, 0, 2*Math.PI); // T a đ tâm (300,100), bán kính 90ọ ộ
ctx.strokeStyle = 'salmon' // Màu c a đ ngủ ườ
ctx.lineWidth = 3; //Đ r ngộ ộ
ctx.stroke();
// Cung tròn 2
ctx.beginPath();
ctx.arc(500, 100, 90, 0, Math.PI); // T a đ tâm (500,100), bán kính 90ọ ộ
ctx.strokeStyle = 'seagreen'; // Màu c a đ ngủ ườ
ctx.lineWidth = 5; //Đ r ngộ ộ
ctx.stroke();
</script>
</body>
</html>
K t qu thu đ cế ả ượ
Vi t ch trong Canvasế ữ
Đ vi t m t đo n văn b n, ta chú tr ng đ n thu c tính và hàm sau:ể ế ộ ạ ả ọ ế ộ
font: đ nh ki u ch cho đo n văn b n.ị ể ữ ạ ả
fillText(text,x,y): Vi t ch trên canvas.ế ữ
strokeText(text,x,y): Vi t ch trên canvas nh ng không tô màu ch .ế ữ ư ữ
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="background:
teal"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "48px Arial";
ctx.fillStyle = 'lightsalmon';
ctx.fillText("Hello World",120,80);
ctx.font = '50px serif';
ctx.strokeStyle = 'lightsalmon';
ctx.strokeText('Hello world', 120, 150);
</script>
</body>
</html>
K t qu :ế ả
có thể bạn quan tâm
Phần tử SVG trong HTML5
12
1.002
358
Lập trình
12
(New)
Một số vấn đề lí luận chung về quan hệ phân phối và thực trạng quan hệ...
30
824
281
Kinh tế quản lý
30
(New)
Xem ảnh hưởng của nồng độ chế phẩm Openamix – LSC và Trichoderma lên k...
50
683
287
Khoa học tự nhiên
50
(New)
Khảo sát, đánh giá sự phân bố các chủng vi nấm Trichoderma trong các l...
60
738
570
Khoa học tự nhiên
60
(New)
Tận dụng nguồn gas sinh ra từ phân heo, được lên men trong quá trình ủ...
56
753
356
Khoa học tự nhiên
56
(New)
Tim hiểu về Broadcast Receiver - một trong những thành phần quan trọng...
16
735
311
Lập trình
16
(New)
Luận văn: phân tích nhân tố đã đưa ra mô hình về sự thỏa mãn trong côn...
61
878
271
Thạc sĩ cao học
61
(New)
Luận văn thạc sĩ: Tổng quan về “Lập trình linh hoạt” và “Quy trình cộn...
106
892
357
Thạc sĩ cao học
106
(New)
thông tin tài liệu
Phần tử
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
