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.024
367
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
862
300
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
705
292
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
768
578
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
773
362
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
752
315
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
902
278
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
916
370
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!
xem nhiều trong tuần
Giáo trình Quản trị học của Đại học kinh tế quốc dân
4 đề thi học sinh giỏi Toán lớp 2, có đáp án kèm theo
Luận văn về các tác nhân ảnh hưởng đến kết quả học tập của sinh viên chính quy trường Đại Học Kinh Tế- TP HCM
Mẫu slide thuyết trình về Golf
Bài tập ôn tập cuối tuần lớp 2: Tuần 21
Bài tập ôn tập cuối tuần lớp 3: Tuần 21
yêu cầu tài liệu
Giúp bạn tìm tài liệu chưa có
×
