Canvas là một thẻ HTML5 tương tự như những thẻ HTML khác, tuy nhiên có một sự khác biệt rõ rệt nhât là nội dung của Canvas lại được xây dựng từ Javascript. Để sử dụng Canvas thì bạn phải đặt thẻ <canvas></canvas> tại vị trí muốn hiển thị, sau đó sử dụng các API mà HTML5 cung cấp dùng để thao tác với các đối tượng bên trong Canvas (line, circle, ...).
Khi sử dụng Canvas bạn phải hiểu được sự khác biệt giữa các phần tử của Canvas và nội dung của nó. Phần tử Canvas chỉ là một thẻ HTML thông thường nhung nội dung của nó là một tập hợp các đối tượng tạo nên một Graphic.
Lúc hiển thị lên trình duyệt thì Canvas sẽ hiển thị ở dạng hình ảnh png.
* Giới thiệu
- Sử dụng trong HTML5, sử dụng để vẽ các đối tượng đồ họa.
Ví dụ: đoạn thẳng, hình tròn, hình chữ nhật, hình vuông, kí tự, văn bản(vẽ chữ)...
- Cú pháp
<canvas id="canvas1" width="200" height="100">
</canvas>
-> Chú ý: Sử dụng Javascript để vẽ các đối tượng đồ họa lên canvas
* Sử dụng javascript để vẽ đối tượng lên canvas
Ví dụ: Vẽ hình chữ nhật lên trên canvas
<canvas id="canvas1" width="200" height="100"
style="background: green; border: 5px solid black;">
</canvas>
<script>
var c=document.getElementById("canvas1");
var ctx= c.getContext("2d");//Ngữ cảnh
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,100,50);
</script>
getContext("2d") được tích hợp trong HTML5 với nhiều thuộc tính và phương thức để vẽ.
fillStyle cài đặt và trả về màu sắc, màu chuyển sắc, hoặc mẫu hình được sử dụng để điền vào các bản vẽ
fillStyle= color|gradient|pattern
shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY
* Ưu điểm của thành phần canvas
Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt:
- Các sơ đồ đơn giản
- Trang trí thêm cho giao diện người dùng
- Biểu đồ và đồ thị
- Hình ảnh động
- Có thể nhúng các ứng dụng vẽ
- Hoạt động tốt với những hạn chế của CSS
* Canvas tọa độ
Canvas là mạng lưới hai chiều
Góc trên bên trái của khung hình có tọa độ (0,0) 0XY
* LineStyle
lineCap: cài đặt hoặc trả về các kiểu dáng của nắp bịt một dòng
lineCap = "butt|round|square";
lineJoin: cài đặt hoặc trả về các kiểu của góc tạo ra, khi hai đường gặp nhau
lineJoin = "bevel|round|miter";//góc vát|làm tròn|góc nhọn
lineWidth: cài đặt hoặc trả về chiều rộng của đường hiện tại theo pixel
miterLimit: cài đặt hoặc trả về độ dài mũ tối đa
* Rectangles
rect, fillRect, strokeRect, clearRect
* Paths
fill, stroke, beginPath, moveTo, closePath, lineTo
* Transformations
scale(scalewidth, scaleheight)//1: 100%, 0.5=50%
rotate(angle)//xoay 5 độ: 5* Math.PI/180
translate(x,y)//xác định lại vị trí 0,0 trên canvas
transform(a,b,c,d,e,f)
//dùng để thực hiện biến đổi hình như scale, skew, move
//a: Tỉ lệ hình vẽ theo chiều ngang
//b: Nghiêng các hình vẽ theo chều ngang
//c: Nghiêng các hình vẽ theo chều dọc
//d: Tỉ lệ hình vẽ theo chiều dọc
//e: Di chuyển hình vẽ theo chiều ngang
//f: Di chuyển hình vẽ theo chiều dọc
* Canvas Text
font
textAlign="center|end|left|right|start";
textBaseline="allphabetic|top|hanging|middle|ideographic|bottom";
fillText(text,x,y,maxWidth)
strokeText(text,x,y,maxWidth)
measureText(text).width;//trả về độ rộng văn bản chỉ định
Ví dụ:
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
--
var txt = "Trung tâm đào tạo tin học";
var width = ctx.measureText(txt).width;
ctx.fillText(width,10,50);
--
var canvas = document.getElementById(“mCanvas”);
var ctext = canvas.getContext(“2d”);
ctext.beginPath();
ctext.moveTo(188, 130);
ctext.bezierCurveTo(140, 10, 388, 10, 288, 100);
ctext.lineWidth = 15;
// line color
ctext.strokeStyle = “purple”;
ctext.stroke();
--
window.onload = function()
{
var canvas = document.getElementById(“mCanvas”);
var ctext = canvas.getContext(“2d”);
var imgObj = new Image();
imgObj.onload = function()
{
ctext.drawImage(imgObj, 69, 50);
};
imgObj.src = “bird.jpg”;
};