Bài 35: Phần tử canvas trong HTML5

Phần tử <canvas> trong HTML được sử dụng để vẽ đồ họa cho trang web.

Các đồ họa hình bên trái được tạo ra bởi <canvas>. Nó gồm 4 phần: một hình chữ nhật màu đỏ, một hình chữ nhật có màu sám nhạt dần, một hình chữ nhật nhiều màu sắc và một chữ nhiều màu sắc.

HTML Canvas là gì?

Phần tử <canvas> trong HTML được sử dụng để vẽ các đối tượng đồ họa, nó chiếm một vùng trên trang web, qua một ngôn ngữ dạng script (thường là JavaScript).

Phần tử <canvas> chỉ chứa khối đồ họa. Bạn phải dùng một script để vẽ các đối tượng đồ họa.

Canvas cung cấp nhiều cách để vẽ đường thẳng, hình hộp, hình tròn, viết chữ, chèn ảnh,v.v.

Trình duyệt hỗ trợ

Những phiên bản trình duyệt bắt đầu hỗ trợ phần tử <canvas>.

Phần tử
<canvas>	4.0	9.0	2.0	3.1	9.0

Các ví dụ về Canvas

Canvas là một vùng hình chữ nhật trên một trang HTML. Theo mặc định, một canvas không đường biên và không chứa nội dung.

Code khai báo một phần tử canvas:


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

Chú ý: Luôn luôn đặt thuộc tính id (để có thể gọi trong script), thuộc tính width và height để đặt kích thước của canvas.

Để thêm đường viền, sử dụng thuộc tính style như ví dụ dưới

Ví dụ cơ bản về Canvas

Code

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Kết quả

Vẽ với JavaScript

Code


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Trình duyệt của bạn không hỗ trợ canvas.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

Kết quả

Vẽ đường thẳng

Code


<!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 c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Kết quả

Vẽ hình tròn

Code


<!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 c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>

Kết quả

Chèn văn bản

Code


<!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 c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Xin chào bạn",10,50);
</script>

</body>
</html>

Kết quả

Chèn văn bản với chữ dạng đường nét

Code


<!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 c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Xin chào bạn",10,50);
</script>

</body>
</html>

Kết quả

Vẽ hình với màu biến đổi tuyến tính (Linear Gradient)

Code


<!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 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");
// Gắn gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Kết quả

Vẽ hình với màu biến đổi từ tâm (Radial Gradient)

Code


<!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 c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Kết quả

Chèn Ảnh

Code


<!DOCTYPE html>
<html>
<body><p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Trình duyệt của bạn không hỗ trợ canvas.
</canvas>

<p><button onclick="myCanvas()">Thêm ảnh vào canvas</button></p>

<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>

</body>
</html>

Kết quả

Ảnh sử dụng:

The Scream

Các thẻ: canvas graphic html html html5

Có thể bạn sẽ thích…

Trưởng viết:

12/09/2016 lúc 3:12 chiều

Không có hướng dẫn làm chữ 7 màu kia ạ

Phan Tiến viết:

12/09/2016 lúc 4:01 chiều

Bạn có thể sử dụng hàm measureText() để thiết lập các mày khác nhau cho các ký tự. Bạn copy code và xem kết quả
code html:

<canvas id="canvas" width="300" height="300"/>

code script


<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function randomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+ r + "," + g + "," + b +")";
}

function texter(str, x, y){
ctx.font = "30px Verdana";
for(var i = 0; i <= str.length; ++i){
var ch = str.charAt(i);
ctx.fillStyle = randomColor();
ctx.fillText(ch, x, y);
x += ctx.measureText(ch).width;
}
}

texter("Câu hỏi rất hay", 10, 30);
</script>

Phan Tiến viết:

12/09/2016 lúc 4:10 chiều

Một ví dụ khác sử dụng màu cách phối màu gradient của 3 màu red, green, blue. Chạy thử code và xem kết quả:


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Trình duyệt của bạn không hỗ trợ</canvas>

<script>

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

ctx.font = "20px Georgia";
ctx.fillText("Không thay đổi màu!", 10, 50);

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0.1", "green");
gradient.addColorStop("0.6", "blue");
gradient.addColorStop("0.3", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Thay đổi theo bảy màu", 10, 90);

</script>
</body>
</html>

Để lại một bình luận Hủy

Bạn phải đăng nhập để gửi bình luận.

Bài 35: Phần tử canvas trong HTML5

HTML Canvas là gì?

Trình duyệt hỗ trợ

Các ví dụ về Canvas

Ví dụ cơ bản về Canvas

Code

Kết quả

Vẽ với JavaScript

Code

Kết quả

Vẽ đường thẳng

Code

Kết quả

Vẽ hình tròn

Code

Kết quả

Chèn văn bản

Code

Kết quả

Chèn văn bản với chữ dạng đường nét

Code

Kết quả

Vẽ hình với màu biến đổi tuyến tính (Linear Gradient)

Code

Kết quả

Vẽ hình với màu biến đổi từ tâm (Radial Gradient)

Code

Kết quả

Chèn Ảnh

Code

Kết quả

Có thể bạn sẽ thích…

Bài 40: Audio trong HTML

Bài 14: Các liên kết trong HTML

Bài 6: Các kiểu bản đồ trong google maps

3 phản hồi

Để lại một bình luận Hủy

Danh mục