# Giới thiệu HTML5 Canvas ## ## Giới thiệu HTML5 Canvas Bài đăng này đã không được cập nhật trong 2 năm ## 1. HTML5 Canvas là gì?# Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web. Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao định trước. Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác. ![html5-canvas.png](https://images.viblo.asia/b85c1145-7ed6-446a-8ac3-bbafd213f21f.png) ## 2. Tại sao lại dùng Canvas?# Bởi vì Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như: * Các sơ đồ đơn giản * Trang trí thêm cho giao diện người dùng * Hình ảnh động * Biểu đồ và đồ thị * Có thể nhúng các ứng dụng vẽ * Hoạt động tốt với những hạn chế của CSS. ## 3. Cách tạo thẻ Canvas# Sử dụng Canvas không khó nhưng bạn cần có 1 ít kiến thức về Html và Javascript. Một số trình duyệt cũ không hỗ trợ canvas, bạn nên sử dụng Firefox 1.5 trở về sau, Opera 9 hoặc phiên bản mới hơn… Bạn có thể tham khảo thêm tại đây: Canvas chiếm một khu vực hình chữ nhật trên trang web mà kích thước của hình chữ nhật được quy định bởi nó. Lưu ý: Mặc định thẻ canvas sẽ không có đường viền và nội dung rỗng. * Khai báo thẻ như sau: ```HTML

Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.

 ``` Lưu ý: Các thuộc tính và kích thước thường được xác định ngay bên trong thẻ canvas. Bạn có thể có nhiều thẻ `` trên một trang HTML. Mặc định, thẻ canvas chỉ có 2 phần tử: `width` và `height`. Nếu không được chỉ ra kích thước, thì kích thước mặc định là `300px` chiều rộng và `150px` chiều cao. * Ví dụ tạo đường viền cho thẻ canvas ```HTML ``` Vẽ trên Canvas với Javascript ```JavaScript var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); ``` Giải thích cho ví dụ trên: Trước tiên, ta tìm đến thẻ `` thông qua id của nó: ```JavaScript var c = document.getElementById("myCanvas"); ``` Sau đó, gọi hàm `getContext()` (nhập chuỗi “2d” vào): ```JavaScript var ctx = c.getContext("2d"); ``` Đối tượng `getContext(“2d”)` trong HTML5 sở hữu nhiều hàm dành cho vẽ hình ảnh như hình hộp, hình tròn, chữ,… 2 dòng sau vẽ ra một hình chữ nhật: ```JavaScript ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); ``` Thuộc tính `fillStyle` được dùng để gán CSS. Thuộc tính `fillRect(x,y,width,height)` để vẽ hình chữ nhật với các tham số tọa độ x,y, chiều rộng, chiều cao. Tọa độ Canvas ![window 7-3906.png](https://images.viblo.asia/ad35e2cf-141e-4250-a49a-f0b8fa317732.png) Canvas là một dạng tọa độ lưới `(x,y)`. Góc trên cùng bên trái của đối tượng canvas có tọa độ `(0,0)`. Vậy nên, hàm `fillRect()` ở trên được thiết lập các tham số `(0,0,150,75)` có nghĩa là nằm sát phía trên bên trái và có kích thước là `150×75` pixels. * Canvas – Vẽ đường thẳng Để vẽ đường thẳng trên một đối tượng canvas, ta sẽ dùng 2 hàm sau: * `moveTo(x,y)` định điểm bắt đầu * `lineTo(x,y)` định điểm kết thúc Sau khi có 2 điểm ta phải dùng một trong những hàm vẽ đường thẳng, chẳng hạn như `stroke()`. Ví dụ: Định điểm bắt đầu `(0,0)` và điểm kết thúc là `(200,100)`. Sau đó dùng hàm `stroke()` vẽ một đường thẳng ```JavaScript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke(); ``` Kết quả ![window 7-3907.png](https://images.viblo.asia/a92ade06-5571-4664-8669-b45d4496b335.png) * Canvas – Vẽ hình tròn Để vẽ một hình tròn trên canvas, chúng ta sử dụng hàm `arc()`: * `arc(x,y,r,start,stop)` Sau khi xác định được tọa độ và bán kính, ta phải dùng một hàm vẽ nét chẳng hạn như stroke() hoặc fill(). Ví dụ: Tạo một hình tròn có tọa độ tại tâm là `(100,50)`, bán kính `50` ```JavaScript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,50,50,0,2*Math.PI); ctx.stroke(); ``` Kết quả![window 7-3908.png](https://images.viblo.asia/9d3c31ea-bb80-4ccd-a07f-433dbb478121.png) * Canvas – Chữ Để viết một đoạn văn bản, ta chú trọng đến thuộc tính và hàm sau: * `font` – định kiểu chữ cho đoạn văn bản * `fillText(text,x,y)` – Viết chữ trên ô canvas * `strokeText(text,x,y)` – Viết chữ trên ô canvas nhưng không tô màu chữ Ví dụ: Sử dụng `fillText()` viết một đoạn văn bản có chiều cao là `30px`, dùng font `Arial` ```JavaScript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); ``` Kết quả![window 7-3909.png](https://images.viblo.asia/d033200c-bead-4716-988a-c71cc9c2a92a.png) * Canvas – Gradients Gradients dùng để tô hình chữ nhật, hình tròn,đường thẳng, văn bản...Có 2 loại gradients: * `createLinearGradient(x,y,x1,y1)` – Quét màu xuất phát từ 1 phía * `createRadialGradient(x,y,r,x1,y1,r1)` – Quét màu xuất phát từ tâm Hàm `addColorStop()` quy định điểm dừng quét màu dọc theo điểm quét(gradient). Điểm gradient có thể ở bất kỳ giữa `0` và `1`. Sau khi thiết lập gradient, ta dùng `fillStyle` hoặc `strokeStyle` để gán gradient vào ô canvas. Ví dụ: Dùng `createRadialGradient()` ```JavaScript 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); ``` Kết quả:![window 7-3912.png](https://images.viblo.asia/91b1113e-ddab-4560-8368-7a04e458ae57.png) * Canvas – Hình ảnh Để vẽ hình ảnh trên một ô canvas, ta dùng hàm `drawImage()`: * `drawImage(image,x,y)` Ví dụ: Vẽ hình ảnh trên một ô canvas ```JavaScript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); ``` Kết quả:![framgia.png](https://images.viblo.asia/2d46e374-85e2-4383-83d0-7f8dc9b28d49.png) ## 4. Một vài ví dụ dùng canvas vẽ hình ảnh * Vẽ cờ Việt Nam: ```JavaScript var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect (0, 0, 500, 300); ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.moveTo(250,80); ctx.lineTo(200,200); ctx.lineTo(320,125); ctx.lineTo(180,125); ctx.lineTo(300,200); ctx.lineTo(250,80); ctx.closePath(); ctx.fill(); } ``` Kết quả:![Screenshot from 2015-10-27 11:15:30.png](https://images.viblo.asia/7b1317fc-9951-4b2f-89eb-cd06a8fcdc26.png) * Vẽ cờ Nhật Bản: ```JavaScript var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 100; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = '#FE0000'; context.fill(); } ``` Kết quả:![Screenshot from 2015-10-27 11:28:17.png](https://images.viblo.asia/048d7c89-9173-4cc3-a511-dd39f1cf95a9.png) ## 5. Kết luận Với việc sử dụng thư viện `canvas`, ta đã có thêm một tùy chọn nữa trong việc vẽ đồ thị, hình động hoặc cao hơn là viết các game nhỏ. Cám ơn các bạn đã đọc bài viết của mình và mong rằng chúng ta sẽ có những trao đổi hữu ích thông qua bài viết này. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://javascriptuse.gitbook.io/javascript/advanced/gioi-thieu-html5-canvas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.