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>Trích nguồn từ: (https://www.w3schools.com/html/html5_canvas.asp)
Từ khóa » Học Canvas Html5
-
HTML5 Canvas Là Gì? - Freetuts
-
Giới Thiệu Về Canvas Trong HTML5 - Viblo
-
Giới Thiệu Về Canvas | Học Lập Trình Cùng Hocjavascript
-
Canvas Trong HTML5
-
Bài 35: Phần Tử Canvas Trong HTML5 | Tìm ở đây
-
Canvas Trong HTML5 | 44 Thẻ HTML5 Hay Nhất
-
Canvas Trong HTML5 - Hoclaptrinh
-
Phần Tử Canvas Trong HTML5
-
Làm Thế Nào để Sử Dụng HTML5 Canvas Element Với JavaScript
-
[Tự Học HTML] Thế Nào Là Canvas Trong đồ Hoạ Của HTML? - Cafedev
-
HTML5 Canvas - CodeHub
-
HTML5 Canvas - Lập Trình Và Quản Trị Hệ Thống
-
Hướng Dẫn Tự Học HTML5 Từ Cơ Bản Tới Nâng Cao
-
Hướng Dẫn Học CSS3 & HTML5 (Phần 4: Chi Tiết Cuối Cùng)