HTML Cơ bản
HTML Nâng cao
Tính năng HTML5
Quảng cáo

HTML5 Canvas

Trong hướng dẫn này, bạn sẽ học cách vẽ đồ họa trên trang web bằng cách sử dụng phần tử canvas HTML5.

Canvas là gì?

Phần tử canvas HTML5 có thể được sử dụng để vẽ đồ họa trên trang web thông qua JavaScript. Canvas ban đầu được Apple giới thiệu cho các tiện ích trên bảng điều khiển Mac OS và để tăng sức mạnh cho đồ họa trong trình duyệt web Safari. Sau đó, nó đã được Firefox, Google Chrome và Opera áp dụng. Bây giờ canvas là một phần của đặc tả HTML5 mới cho các công nghệ web thế hệ tiếp theo.

Theo mặc định, phần tử <canvas> có chiều rộng 300px và chiều cao 150px mà không có bất kỳ đường viền và nội dung nào. Tuy nhiên, chiều rộng và chiều cao tùy chỉnh có thể được xác định bằng cách sử dụng thuộc tính CSS heightwidth trong khi đường viền có thể được áp dụng bằng cách sử dụng thuộc tính CSS border.

Hiểu tọa độ Canvas

Khung hình là một vùng hình chữ nhật hai chiều. Tọa độ của góc trên bên trái của canvas là (0, 0) được gọi là điểm gốc và tọa độ của góc dưới cùng bên phải là ( chiều rộng canvas , chiều cao canvas ). Đây là một minh họa đơn giản về hệ tọa độ mặc định của canvas.


(0,0)

 

Mẹo: Đặt con trỏ chuột của bạn trong vùng canvas được minh họa ở trên và bạn sẽ nhận được tọa độ hiện tại của nó so với canvas. Phần tử <canvas> này được hỗ trợ trong tất cả các trình duyệt web chính như Chrome, Firefox, Safari, Opera, IE 9 trở lên.


Vẽ Đường dẫn và Hình dạng trên Canvas

Trong phần này, chúng ta sẽ xem xét kỹ hơn cách vẽ các đường dẫn và hình dạng cơ bản bằng cách sử dụng phần tử canvas HTML5 và JavaScript mới được giới thiệu.

Đây là mẫu cơ sở để vẽ đường dẫn và hình dạng lên canvas 2D HTML5.

Thí dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing on Canvas</title>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // draw stuff here
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Tất cả các dòng trừ những dòng từ 7 đến 11 đều khá thẳng về phía trước. Chức năng ẩn danh được đính kèm với sự kiện window.onload sẽ thực thi khi tải trang. Sau khi trang được tải, chúng ta có thể truy cập phần tử canvas bằng phương thức document.getElementById(). Sau đó, chúng ta đã xác định bối cảnh canvas 2D bằng cách chuyển 2d vào phương thức getContext() của đối tượng canvas.

Vẽ một đường

Đường cơ bản nhất mà bạn có thể vẽ trên canvas là một đường thẳng. Các phương pháp thiết yếu nhất được sử dụng cho mục đích này là moveTo()lineTo()và stroke().

Phương thức  moveTo()xác định vị trí của con trỏ vẽ trên canvas, trong khi phương thức lineTo() được sử dụng để xác định tọa độ của điểm cuối của đường và cuối cùng phương thức stroke() được sử dụng để làm cho đường có thể nhìn thấy được. Hãy thử một ví dụ:

Thí dụ

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

Vẽ vòng cung

Bạn có thể tạo vòng cung bằng phương thức arc(). Cú pháp của phương thức này như sau:

context.arc (centerX, centerY, radius, startedAngle, endingAngle, ngược chiều kim đồng hồ);

Mã JavaScript trong ví dụ sau sẽ vẽ một vòng cung trên canvas.

Thí dụ

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

Vẽ hình chữ nhật

Bạn có thể tạo hình chữ nhật và hình vuông bằng phương thức rect(). Phương thức này yêu cầu bốn tham số x, y vị trí của hình chữ nhật và chiều rộng và chiều cao của nó.

Cú pháp cơ bản của phương thức rect() có thể được đưa ra với:

context.rect (x, y, width, height);

Đoạn mã JavaScript sau sẽ vẽ một hình chữ nhật có tâm trên canvas.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

Vẽ một vòng tròn

Không có phương pháp cụ thể nào để tạo hình tròn như phương thức rect() của hình chữ nhật. Tuy nhiên, bạn có thể tạo một cung tròn khép kín như hình tròn bằng phương thức arc().

Cú pháp để vẽ một hình tròn hoàn chỉnh bằng phương thức arc() này có thể được đưa ra với:

context.arc (centerX, centerY, radius, 0, 2 * Math.PI, false);

Ví dụ sau sẽ vẽ một vòng tròn hoàn chỉnh ở giữa trên canvas.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>

Áp dụng kiểu và màu trên nét vẽ

Màu mặc định của nét là màu đen và độ dày của nó là một pixel. Tuy nhiên, bạn có thể đặt màu và chiều rộng của stoke bằng cách sử dụng thuộc tính strokeStylevà lineWidthtương ứng.

Ví dụ sau sẽ vẽ một đường màu cam có chiều rộng 5 pixel.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

Bạn cũng có thể đặt kiểu mũ cho các dòng bằng cách sử dụng thuộc tính lineCap. Có ba kiểu dáng dành cho mũ lưỡi trai - mông, tròn và vuông. Đây là một ví dụ:

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

Tô màu bên trong Hình dạng Canvas

Bạn cũng có thể tô màu bên trong các hình dạng canvas bằng phương thức fillStyle().

Ví dụ sau đây sẽ chỉ cho bạn cách tô một màu đồng nhất bên trong một hình chữ nhật.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>
 

Mẹo: Trong khi tạo kiểu cho các hình dạng trên canvas, bạn nên sử dụng phương thức fill() trước phương thức stroke() để hiển thị nét vẽ một cách chính xác.

Tương tự, bạn cũng có thể sử dụng phương thức fillStyle() để tô màu đặc bên trong một hình tròn.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

Tô màu Gradient bên trong Canvas Shapes

Bạn cũng có thể tô màu gradient bên trong các hình dạng canvas. Gradient chỉ là một sự chuyển đổi hình ảnh mượt mà từ màu này sang màu khác. Có hai loại gradient có sẵn - tuyến tính và xuyên tâm .

Cú pháp cơ bản để tạo gradient tuyến tính có thể được đưa ra với:

var grd = context.createLinearGradient (startX, startY, endX, endY);

Ví dụ sau sử dụng phương thức createLinearGradient() này để tô màu gradient tuyến tính bên trong hình chữ nhật. Hãy cùng dùng thử để hiểu về cơ bản nó hoạt động như thế nào:

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

Tương tự, bạn có thể tô các hình dạng canvas bằng radial gradient bằng phương thức createRadialGradient(). Cú pháp cơ bản để tạo một gradient xuyên tâm có thể được đưa ra với:

var grd = context.createRadialGradient (startX, startY, startRadius, endX, endY, endRadius);

Ví dụ sau sử dụng phương thức createRadialGradient() để tô màu gradient xuyên tâm bên trong một hình tròn. Hãy dùng thử để hiểu cách nó thực sự hoạt động:

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

Vẽ văn bản trên canvas

Bạn cũng có thể vẽ văn bản lên canvas. Các văn bản này có thể chứa bất kỳ ký tự Unicode nào. Ví dụ sau sẽ vẽ một thông điệp chào mừng đơn giản "Hello World!" lên canvas.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("Hello World!", 50, 100);
    };
</script>

Ngoài ra, bạn có thể đặt màu và căn chỉnh của văn bản trên canvas, như sau:

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
    };
</script>

Bạn cũng có thể áp dụng đột quỵ trên văn bản bằng cách sử dụng phương thức strokeText(). Phương pháp này sẽ tô màu chu vi của văn bản thay vì tô màu. Tuy nhiên, nếu bạn muốn đặt cả tô màu và nét vẽ trên văn bản canvas, bạn có thể sử dụng cả hai phương thức fillText()và strokeText()cùng nhau.

Thí dụ

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("Hello World!", 150, 100);
    };
</script>
 

Mẹo: Trong khi tạo kiểu cho văn bản trên canvas, bạn nên sử dụng phương thức fillText() trước phương thức strokeText() để hiển thị nét vẽ một cách chính xác.

Bài viết này đã giúp ích cho bạn?

Advertisements