Trần Ngọc Minh Notes

HTML5 hỗ trợ phần tử <canvas> cho phép vẽ đồ hoạ trên một trang web thông qua các đoạn mã JavaScritp.

Phần tử <canvas> là khung chứa (container) mà ta sẽ thể hiện các đối tượng trên đó (giống như khung vẽ của người hoạ sỹ).

HTML Canvas cung cấp một vài phương thức dùng để vẽ các đường cong (paths), các hình hộp (boxes), văn bản (text), hình tròn (circles), và thêm các hình ảnh.

Thẻ <canvas> được hỗ trợ trong các phiên bản trình duyệt (phổ biến nhất) như sau:

Chrome
IE/Edge
Firefox
Safari
Opera
<canvas>
4.0+
9.0+
2.0+
3.1+
9.0+

Tóm Tắt

HTML Canvas Drawing (Vẽ trên Canvas)

Chúng ta có thể vẽ lên canvas bằng các đoạn mã JavaScript. Gồm các bước sau:

Bước 1: tìm phần tử Canvas bằng phương thức getElementById() của đối tượng document như đoạn mã sau:


var canvas = document.getElementById("myCanvas");

Bước 2: tạo một đối tượng Drawing bằng đối tượng sẵn có trong HTML là getContext() chứa các thuộc tính và phương thức dùng để vẽ. Đoạn mã sau minh hoạ cách dùng đối tượng getContext():


var ctx = canvas.getContext("2d");// vẽ đối tượng 2D

Bước 3: vẽ trên canvas vừa tạo. Ví dụ dùng thuộc tính fillStyle (màu nền) và phương thức fillRect dùng để vẽ một đối tượng hình chữ nhật 2D như sau:


ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

Đoạn mã hoàn chỉnh của ví dụ cho các bước trên như sau:


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #c3c3c3;">

Trình duyệt không hỗ trợ phần tử canvas.

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Danh sách đầy đủ các thuộc tính và phương thức của đối tượng getContext (“2d“) có thể tham khảo tại https://www.w3schools.com/graphics/canvas_reference.asp.

Kết quả >

Toạ độ Canvas (Canvas Coordinates)

Canvas là một lưới hai chiều có góc trái trên có toạ độ là (0,0).

Vẽ hình chữ nhật

Chúng ta dùng phương thức fillRect. Ví dụ fillRect(0, 0, 100, 70) nghĩa là chúng ta vẽ một hình chữ nhật kích thước 100×70 pixels tại góc trái trên.

Vẽ đường thẳng

Để vẽ đường thẳng trên canvas, chúng ta dùng các phương thức của đối tượng getContext() như sau:

moveTo(x,y): định nghĩa toạ độ điểm bắt đầu
lineTo(x,y): định nghĩa toạ độ điểm kết thúc
stroke(): vẽ đường thẳng

Đoạn mã minh hoạ vẽ đường thẳng:


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Trình duyệt của bạn không hỗ trợ canvas.

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

Kết quả >

Vẽ đường tròn

Để vẽ đường tròn trên canvas, chúng ta dùng các phương thức của đối tượng getContext() như sau:

beginPath(): khởi động quá trình vẽ
arc(x, y, r, startangle, endangle): tạo một đường tròn tâm (x, y), bán kính r, góc quay 360 độ (startangle = 0, endangle = 2 * Math.PI)
stroke(): vẽ đường tròn

Đoạn mã minh hoạ:


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

Kết quả >

Canvas Gradients

Màu nền của các đối tượng đồ hoạ trên canvas không những là các màu đồng nhất mà có thể sử dụng gradient (hiệu ứng chuyển màu). Có hai kiểu gradient là:

Linear gradient: chuyển màu theo một hướng nào đó (từ bên trái, bên phải bên trên,…)
Radial/circular gradient: chuyển màu theo mọi hướng.

Để dùng gradient trong canvas chúng ta thực hiện các bước sau:

Tạo gradient bằng một trong hai phương thức createLinearGradient hay createRadialGradient
Khởi tạo màu bắt đầu và màu kết thúc của quá trình chuyển màu với phương thức addColorStop
Dùng gradient để vẽ một đối tượng nào đó (hình chữ nhật, hình tròn, v.v.) thông qua phương thức fillStyle hay fillRect.

Đoạn mã minh hoạ dùng createLinearGradient:


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Tạo gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Dùng gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Kết quả >

Đoạn mã minh hoạ dùng createRadialGradient:


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Tạo gradient

var grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Dùng gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Kết quả >

Canvas Text

Để vẽ đối tượng văn bản trên canvas, chúng ta dùng các phương thức và thuộc tính phổ biến của đối tượng getContext() như sau:

Thuộc tính font, textAlign,…: định nghĩa các thuộc tính font chữ, canh lề cho văn bản.
Phương thức vẽ đối tượng văn bản fillText(text,x,y) (có màu nền) hay strokeText(text,x,y) (không màu nền) dùng để vẽ đối tượng text trên canvas tại điểm có toạ độ (x,y).

Đoạn mã minh hoạ dùng fillText():


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Hello World",10,50);

</script>

</body>

</html>

Kết quả >

Đoạn mã minh hoạ dùng strokeText()


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

</body>

</html>

Kết quả >

Đoạn mã minh hoạ kết hợp nhiều thuộc tính:


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="200"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx=canvas.getContext("2d");

ctx.font="30px Comic Sans MS";

ctx.fillStyle = "red";

ctx.textAlign = "center";

ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

</script>

</body>

</html>

Kết quả >

Canvas Images

Có thể vẽ hình ảnh trên canvas thông qua phương thức drawImage(image, x, y). Đoạn mã minh hoạ cách dùng drawImage:


<!DOCTYPE html>

<html>

<body>

<p>Image to use:</p>

<img id="scream" width="220" height="277"

src="pic_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>

<canvas id="myCanvas" width="240" height="297"

style="border:1px solid #d3d3d3;">

Trình duyệt không hỗ trợ canvas.

</canvas>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10);

};

</script>

</body>

</html>

Học HTML & CSS >

Chia sẻ:

Thích bài này:

Thích

Đang tải…

Trần Ngọc Minh Notes

HTML Canvas Drawing (Vẽ trên Canvas)

Toạ độ Canvas (Canvas Coordinates)

Vẽ hình chữ nhật

Vẽ đường thẳng

Vẽ đường tròn

Canvas Gradients

Canvas Text

Canvas Images

Chia sẻ:

Thích bài này:

Related

mtoplist