Đồ họa nói chung và đồ họa trong các ứng dụng web nói riêng là thành phần rất quan trọng. Từ việc hiển thị các biểu tượng đơn giản cho tới các biểu đồ trực quan, hay thậm chí là hiển thị đồ họa cho game online trên nền tảng web. Về cơ bản chúng ta có thể sử dụng HTML5 Canvas và JavaScript để hiển thị các đối tượng đồ họa.
HTML5 Canvas là gì ?
Thẻ Canvas trong HTML5 được sử dụng để vẽ đồ họa một cách nhanh chóng, thông qua JavaScript. Thẻ <canvas> chỉ là vùng chứa cho đồ họa. Bạn phải sử dụng JavaScript để thực sự vẽ đồ họa.
Trong bài học này, chúng ta sẽ tạo thư mục mới với cấu trúc như hình sau đây để làm ví dụ:
Khai báo thẻ canvas trong file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content="width=device-width,initial-scale=1" />
<title>Hướng dẫn sử dụng JavaScript để xử lý đồ họa HTML5 Canvas</title>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
Định dạng cho thẻ canvas bằng file index.css
#canvas{
box-sizing: border-box;
width: 720px;
max-width: 100%;
margin: 20px auto;
padding: 0px;
background-color: #cccccc;
}
Mở file index.html trên trình duyệt, chúng ta sẽ thấy giao diện như hình:
Chúng ta chỉ nhìn thấy phần màu nền xám của thẻ canvas, để thực hiện vẽ các đối tượng đồ họa như điểm, đường thẳng, hình tròn, hình chữ nhật, hay chèn hình ảnh, chữ vào vùng chứa canvas, chúng ta phải sử dụng JavaScript.
Sử dụng JavaScript để vẽ trong HTML5 Canvas
Trước tiên, chúng ta sẽ khai báo một đối tượng JavaScript liên kết tới vùng chứa Canvas phía trên.
Thực hiện viết code trong file index.js:
var myCanvas = document.getElementById("canvas");
myCanvas.width = myCanvas.clientWidth;
myCanvas.height = myCanvas.width * 9 / 16;
var myContext = myCanvas.getContext("2d");
// Using myContext to draw any graphic object
Trong đoạn code trên, chúng ta đã sử dụng hàm getContext("2d") để tạo đối tượng vẽ thông qua Canvas và gán cho biến myContext. Chúng ta sẽ sử dụng biến này để tiến hành vẽ các đối tượng đồ họa.
Thuộc tính width và height của thẻ Canvas được xác định với tỉ lệ 16 / 9 (đây là một trong các tỉ lệ hay dùng trong các màn hình hiển thị hiện nay).
Vẽ các đối tượng đồ họa cơ bản trong canvas bằng JavaScript
Có rất nhiều các đối tượng đồ họa khác nhau có thể được vẽ bằng HTML5 Canvas thông qua JavaScript, trong bài viết này, mình sẽ giới thiệu về cách vẽ các đối tượng cơ bản thường hay sử dụng. Mình sẽ trình bày theo từng ví dụ cụ thể, có hình ảnh kết quả kèm theo để các bạn dễ dàng hình dung.
Ví dụ 1: Vẽ đường thẳng.
Code trong file index.js
myContext.beginPath();
myContext.moveTo(5, 5);
myContext.lineTo(myCanvas.width-5, myCanvas.height-5);
myContext.stroke();
Và đây là kết quả
Ví dụ 2: Vẽ hình chữ nhật
Code trong file index.js
myContext.fillStyle = '#26a1dd';
myContext.fillRect(10, 10, 300, 200);
Trong ví dụ trên, chúng ta đã vẽ hình chữ nhật màu xanh, với góc trên phía trái của hình chữ nhật tại điểm (0,0), chiều dài hình chữ nhật là 300, chiều rộng hình chữ nhật là 200.
Và đây là kết quả
Ví dụ 3: Vẽ hình tròn
Code trong file index.js
// Hình 1: Hình tròn đầy đủ
myContext.beginPath();
myContext.arc(60, 60, 50, 0 *2*Math.PI, 1 * 2*Math.PI);
myContext.fillStyle = '#26a1dd';
myContext.fill();
// Hình 2: 3/4 hình tròn
myContext.beginPath();
myContext.arc(180, 60, 50, 0 *2*Math.PI, (3/4) * 2*Math.PI);
myContext.lineTo(180,60);
myContext.closePath();
myContext.fillStyle = '#26a1dd';
myContext.fill();
// Hình 3: 3/4 đường tròn, bắt đầu từ góc 45deg
myContext.beginPath();
myContext.arc(300, 60, 50, (7/8) *2*Math.PI, (7/8 + 3/4) * 2*Math.PI);
myContext.lineTo(300,60);
myContext.closePath();
myContext.stroke();
Và đây là kết quả
Chèn hình ảnh vào Canvas bằng JavaScript
Đầu tiên, tải về một file hình ảnh và đặt vào thư mục gốc của dự án, mình đã tải file "fruit.png" và đặt cùng cấp với file index.html.
Code trong file index.js
var myImage = new Image(200, 222);
myImage.onload = function(){
myContext.drawImage(myImage, 100, 50);
};
myImage.src="fruit.png";
Và đây là kết quả
Chèn chữ vào Canvas bằng JavaScript
Code trong file index.js
myContext.font = "20px Arial";
// Chữ với màu xanh
myContext.fillStyle = "#26a1dd";
myContext.fillText("Chữ với màu xanh", 10, 50);
// Chữ với viền màu xanh
myContext.strokeStyle = "#26a1dd";
myContext.strokeText("Chữ với viền màu xanh", 10, 100);
// Chữ được căn giữa
myContext.fillStyle = "#26a1dd";
myContext.textAlign = "center";
myContext.fillText("Chữ được căn giữa", myCanvas.width / 2, myCanvas.height / 2);
Và đây là kết quả
Xóa toàn bộ đối tượng đã vẽ trên Canvas
Để xóa toàn bộ các đối tượng đồ họa đã vẽ bằng JavaScript trên một thẻ canvas nào đó, sử dụng hàm clearRect() như bên dưới.
Code trong file index.js
myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
Bài viết có sử dụng các tài liệu tham khảo tại:
1. https://www.w3schools.com/html/html5_canvas.asp, truy cập ngày 25/06/2021.
2. https://www.w3schools.com/tags/canvas_arc.asp, truy cập ngày 25/06/2021.
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Hướng dẫn sử dụng Javascript để xử lý đồ họa HTML5 Canvas