Giới thiệu HTML5 canvas, tạo đối tượng vẽ, các đường nét, hình chữ nhật, đường tròn và vẽ một ảnh với canvas 2D. Năm 2012, W3C giới thiệu HTML5 mở đầu cho 1 giai đoạn mới của internet, HTML5 ra đời với nhiều tính năng giúp tiện dụng hơn trong việc tạo ra các văn bản web sinh động và có nhiều lựa chọn. Hỗ trợ các HTML tags hữu ích và mang ngữ nghĩa: <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>0, <audio> và hỗ trợ tốt về đồ họa, cái mà phiên bản trước đó không có phải sử dụng thêm các add-on lên trình duyệt như Flash. <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>1 ra đời kèm theo các api hỗ trợ vẽ không chỉ 2D mà còn cả WebGL để các nhà phát triển có thể tạo ra các ứng dụng đồ họa phong phú trên nền web.
Các trình duyệt web thông dụng hiện tại đã hỗ trợ tốt cho <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>1. Code demoindex.htm<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 2D trong HTML5</title>
<script>
function load(_id) {
var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");
context.fillStyle = "#ffeeff";
context.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
context.fillStyle = "#ff8800";
context.font = "20px Arial";
context.fillText("PRESS DRAW BUTTON", 180, 220);
}
function draw(_id) {
var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");
context.fillStyle = "#ffeeff";
context.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
var pos1 = Math.floor(Math.random() * 100 + 1);
var pos2 = Math.floor(Math.random() * 100 + 1);
var pos3 = Math.floor(Math.random() * 100 + 1);
var pos4 = Math.floor(Math.random() * 100 + 1);
// FILL RECTANGLE
context.fillStyle = "#ff8800";
context.fillRect(0 + pos1, 0 + pos4, 150, 75);
// DRAW RECTANGLE
context.strokeStyle = "#000000";
context.strokeRect(50 + pos2, 50 + pos3, 120, 75);
// DRAW A LINE
context.strokeStyle = "#00aadd";
context.moveTo(100 + pos3, 200 + pos2);
context.lineTo(250 + pos3, 250 + pos2);
context.stroke();
// DRAW CIRCLE
context.beginPath();
context.arc(250 + pos4, 50, 40, 0, 2 * Math.PI);
context.stroke();
// FILL CIRCLE
context.fillStyle = "#ffbb33";
context.beginPath();
context.arc(300 + pos1, 300 + pos4, 30, 0, 2 * Math.PI);
context.fill();
// DRAW TEXT
context.strokeStyle = "#ffbb33";
context.font = "30px Arial";
context.strokeText("www.stdio.vn", 10 + pos2, 300 + pos3);
// FILL TEXT
context.fillStyle = "#aa0000";
context.font = "25px Arial";
context.fillText("STDIO.VN", 300 + pos3, 250 + pos2);
// DRAW IMAGE
var image = new Image();
image.src = "sins.png";
image.onload = function () {
context.drawImage(image, 200 + pos2, 100 + pos3);
};
}
</script>
</head>
<body onload="load('canvas_49')">
<div style="width: 1280; height: 720; float: left;">
<canvas id="canvas_49" width="600" height="450">
YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS
</canvas>
<div>
<button onclick="draw('canvas_49')">
DRAW
</button>
<button onclick="load('canvas_49')">
RELOAD
</button>
</div>
</div>
</body>
</html>
sins.png Phân tích và giải thích codeLưu <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>3 và <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>4, mở <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>3 bằng trình duyệt web để khảo sát. Tạo thẻ <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>1 <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas> Các phép vẽ từ JavaScript sẽ được vẽ lên canvas, đặt id là <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>7, id này dùng cho JavaScript để lấy được canvas thông qua <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>8. Xem xét hàm vẽ draw(_id)Trong hàm này có 2 phần chính, phần thứ nhất là lấy đối tượng vẽ <canvas id="canvas_49" width=600 height=450 > YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS </canvas>9 của canvas, phần thứ 2 là vẽ các ảnh đơn giản.
Tạo "context"var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");Các phương thức vẽ cơ bản// FILL RECTANGLE
context.fillStyle = "#ff8800";
context.fillRect(0 + pos1, 0 + pos4, 150, 75);
// DRAW RECTANGLE
context.strokeStyle = "#000000";
context.strokeRect(50 + pos2, 50 + pos3, 120, 75);
// DRAW A LINE
context.strokeStyle = "#00aadd";
context.moveTo(100 + pos3, 200 + pos2);
context.lineTo(250 + pos3, 250 + pos2);
context.stroke();
// DRAW CIRCLE
context.beginPath();
context.arc(250 + pos4, 50, 40, 0, 2*Math.PI);
context.stroke();
// FILL CIRCLE
context.fillStyle = "#ffbb33";
context.beginPath();
context.arc(300 + pos1, 300 + pos4, 30, 0, 2*Math.PI);
context.fill();
// DRAW TEXT
context.strokeStyle = "#ffbb33";
context.font = "30px Arial";
context.strokeText("www.stdio.vn", 10 + pos2, 300 + pos3);
// FILL TEXT
context.fillStyle = "#aa0000";
context.font = "25px Arial";
context.fillText("Kevin La", 300 + pos3, 250 + pos2);
// DRAW IMAGE
var image = new Image();
image.src = "sins.png";
image.onload = function()
{
context.drawImage(image, 200 + pos2, 100 + pos3);
}Các phương thức vẽ có trong demo
Khái niệm stroke và fillVẽ các ảnh này ta cần phân biệt 2 khái niệm cơ bản:
var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");1 là chỉ định màu muốn dành cho việc tô.var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");2 là chỉ định màu muốn dành cho việc vẽ viền.Vẽ một ảnh - Draw ImageĐể vẽ một ảnh, đầu tiên tải và nạp ảnh vào bộ nhớ: var image = new Image(); image.src = "sins.png"; Tạo 1 đối tượng Image, sau đó chỉ định đường dẫn tới ảnh mà ta cần tải và nạp. Sau bước này, ta có thể gọi hàm vẽ ngay context.drawImage(image, 200 + pos2, 100 + pos3); 3 dòng code sau để nạp và vẽ ảnh var image = new Image(); image.src = "sins.png"; context.drawImage(image, 200 + pos2, 100 + pos3); var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");3 có thể không tải và nạp kịp do JavaScript là cơ chế bất đồng bộ, nên var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");4 có thể không kịp dữ liệu để vẽ, ta cần phải đợi cho đến khi ảnh đã tải và nạp xong - var canvas = document.getElementById(_id);
var context = canvas.getContext("2d");5 - mới tiến hành vẽ. |
