Canvas hiểu đơn giản là một thẻ tag mới của HTML5, được xây dựng từ Javascript, dùng để vẽ hình, tạo hiệu ứng, thậm chí có thể làm game đơn giản ngay trên trang web của bạn. Trong bài viết này mình sẽ không nói nhiều về định nghĩa, hay các hàm trong Canvas, những cái đấy đã có rất nhiều trang web giải thích rồi. Tuy nhiên đọc chay như vậy khá là nhàm chán và khó nhớ, vì vậy bài viết này mình sẽ hướng dẫn bạn tạo một hình vẽ đơn giản bằng Canvas.
cùng với độ dài rộng của hình ảnh.
Giờ chúng ta có một ảnh canvas trống, tất nhiên là chưa nhìn thấy gì
chỉ tạo ra một khu vực để chúng ta dùng javascript để vẽ. Chúng ta không vẽ trên canvas, giống như chúng ta không vẽ lên bàn. Chúng ta vẽ lên một cái gì đó trên bàn, trong trường hợp này là context
var context = document.getElementById["canvasId"].getContext["2d"];
Chúng ta sử dụng phương thức getContext
với
tham số "2d" để vẽ hình 2d, trên hệ trục tọa độ [x, y]. Giờ chúng ta bắt đầu vẽ. Đầu tiên vẽ hình tam giác:
var width = 125; // Triangle Width
var height = 105; // Triangle Height
var padding = 20;
// Draw a path
context.beginPath[];
context.moveTo[padding + width/2, padding]; // Top Corner
context.lineTo[padding + width, height + padding]; // Bottom Right
context.lineTo[padding, height + padding]; // Bottom Left
context.closePath[];
// Fill the path
context.fillStyle = "#ffc821";
context.fill[];
Phương thức beginPath[]
dùng để bắt đầu một hình vẽ, kết thúc với closePath[]
. Tuy nhiên để có thể nhìn thấy, ta cần thêm màu cho nó, có 2 cách, một là dùng stroke[]
, ta sẽ có một hình tam giác rỗng, còn trong trường hợp này mình dùng fill[]
, ta sẽ có một hình tam giác đặc, mặc định sẽ có màu đen, mình muốn tô màu vàng nên thêm fillStyle
để truyền vào mã màu mà mình muốn.
createLinearGradient
, và phương thức addColorStop
để quy ước màu cho dải màu.// Create fill gradient
var gradient = context.createLinearGradient[0, 0, 0, height];
gradient.addColorStop[0, "#ffc821"];
gradient.addColorStop[1, "#faf100"];
// Fill the path
context.fillStyle = gradient;
context.fill[];
shadowBlur
và shadowColor
, nhưng nhớ phải thêm vào trước khi fill[]
// Create fill gradient
//...
// Add a shadow around the object
context.shadowBlur = 10;
context.shadowColor = "black";
// Fill the path
// ...
10 là độ rộng của bóng, số này càng to thì bóng càng mờ.
// Add a horizon reflection with a gradient to transparent
gradient = context.createLinearGradient[0,padding,0,padding+height];
gradient.addColorStop[0.5, "transparent"];
gradient.addColorStop[0.5, "#dcaa09"];
gradient.addColorStop[1, "#faf100"];
// Fill the path
context.fillStyle = gradient;
context.fill[];
Lần này ta có dùng thêm màu transparent [màu trong suốt], để dài màu này sẽ có màu bắt đầu từ giữa hình tam giác, sau đó chuyển dần sang màu nền.
// Stroke the inner outline
context.lineWidth = 5;
context.lineJoin = "round";
context.strokeStyle = "#333";
context.stroke[];
lineWidth
là độ rộng của đường đường
thẳng, lineJoin
là hình dáng góc khi 2 đường thẳng gặp nhau, trong trường hợp này là bo tròn. Ở đây ta chỉ muốn kẻ viền nên dùng stroke[]
thay vì fill[]
.
context.lineWidth = 20;
context.lineJoin = "round";
context.strokeStyle = gradient;
context.stroke[];
Giờ chỉ thiếu một dấu chấm than để hoàn thiện. Ta dùng phương thức fillText
. Đừng quên thêm try/catch
để tránh trường hợp bị lỗi trên Internet Explorer 8.0.
context.textAlign = "center";
context.textBaseline = "middle";
context.font = "bold 60px 'Times New Roman', Times, serif";
context.fillStyle = gradient;
try{
context.fillText["!", canvasWidth/2, padding + height/1.5];
}catch[ex]{}
Nguồn: //www.williammalone.com/articles/html5-canvas-example [Trong này có source code, bạn có thể down về để tham khảo]