Hướng dẫn html to canvas javascript - html sang javascript canvas

Question

Đồ 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.

Nội dung chính Show

HTML5 Canvas là gì ?
Sử dụng JavaScript để vẽ trong HTML5 Canvas
Vẽ các đối tượng đồ họa cơ bản trong canvas bằng JavaScript
Ví dụ 1: Vẽ đường thẳng.
Ví dụ 2: Vẽ hình chữ nhật
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.
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.
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.
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.

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ẻ 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);

Và đây là kết quả

Ví dụ 2: Vẽ hình chữ nhật

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.

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í dụ 2: Vẽ hình chữ nhật

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ả

Code trong file index.js

var myImage = new Image(200, 222);

myImage.onload = function(){
    myContext.drawImage(myImage, 100, 50);
};

myImage.src="fruit.png";

Ví dụ 2: Vẽ hình chữ nhật

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.

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í dụ 2: Vẽ hình chữ nhật

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ả

Code trong file index.js

myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);

Và đây là kết quả

Ví dụ 2: Vẽ hình chữ nhật

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.

programming javascript Canvas JavaScript Canvas trong HTML beginPath trong JavaScript Học Canvas Thẻ canvas