HTML5 Canvas - TEDU

Trang chủ » Canvas Là Gì Html » HTML5 Canvas - TEDU

Có thể bạn quan tâm

HTML Canvas là gì.

Phần tử HTML <canvas> được sử dụng để vẽ đồ họa một cách nhanh chóng bằng JavaScript trên một trang web.

Phần tử <canvas> chỉ là một bộ chứa cho đồ họa, bạn phải dùng JavaScript để vẽ chúng.

Canvas có nhiều phương thức để vẽ, đường thẳng, hình hộp, hình tròn, văn bản, và thêm ảnh.

Ví dụ về Canvas

Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.

Cú pháp như sau:

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

Note: Luôn chỉ ra thuộc tính id (để làm việc với JavaScript), thêm thuộc tính width và height để xác định kích thước của canvas, để thêm border dùng thuộc tính style.

Ví dụ về một canvas cơ bản:

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

Kẻ đường thẳng

Ví dụ

<!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>

Vẽ hình tròn

Ví dụ

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke();

Vẽ văn bản

Ví dụ

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);

Viền văn bản

Ví dụ

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50);

Vẽ Gradient tuyến tính

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80);

Vẽ Gradient hình tròn

Ví dụ

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

Vẽ hình ảnh

Ví dụ

<!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;"> Your browser does not support the HTML5 canvas tag.</canvas> <p><button onclick="myCanvas()">Try it</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>

Từ khóa » Canvas Là Gì Html