Bài 35: Phần Tử Canvas Trong HTML5 | Tìm ở đây

Trang chủ » Học Canvas Html5 » Bài 35: Phần Tử Canvas Trong HTML5 | Tìm ở đây

Có thể bạn quan tâm

html_canvas1

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ử icon_chrome icon_ie icon_firefox icon_safari  icon_opera
<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ả

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

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ả

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

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ả

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

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ả

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

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ả

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

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ả

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

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ả

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

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ả

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

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

Thêm ảnh vào canvas

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

Từ khóa » Học Canvas Html5