Hướng dẫn canvas html la gì - canvas html là gì

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.

Hướng dẫn canvas html la gì - canvas html là gì

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: http://caniuse.com/canvas

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:
<canvas id="exampleCanvas" width="500" height="300">

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

  
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ẻ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
3 trên một trang HTML. Mặc định, thẻ canvas chỉ có 2 phần tử:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
4 và
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
5. Nếu không được chỉ ra kích thước, thì kích thước mặc định là
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
6 chiều rộng và
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
7 chiều cao.

  • Ví dụ tạo đường viền cho thẻ canvas
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>

Vẽ trên Canvas với 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ẻ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
3 thông qua id của nó:

var c = document.getElementById("myCanvas");

Sau đó, gọi hàm

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
9 (nhập chuỗi “2d” vào):

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

Đối tượng

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
0 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:

ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

Thuộc tính

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
1 được dùng để gán CSS.

Thuộc tính

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
2 để 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 Canvas là một dạng tọa độ lưới

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
3.
Hướng dẫn canvas html la gì - canvas html là gì
Canvas là một dạng tọa độ lưới
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
3.

Góc trên cùng bên trái của đối tượng canvas có tọa độ

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

Vậy nên, hàm

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
5 ở trên được thiết lập các tham số
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
6 có nghĩa là nằm sát phía trên bên trái và có kích thước là
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
7 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:

    • var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(0,0,150,75);
      
      8 định điểm bắt đầu
    • var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(0,0,150,75);
      
      9 đị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ư

    var c = document.getElementById("myCanvas");
    
    0.

    Ví dụ: Định điểm bắt đầu

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    
    4 và điểm kết thúc là
    var c = document.getElementById("myCanvas");
    
    2. Sau đó dùng hàm
    var c = document.getElementById("myCanvas");
    
    0 vẽ một đường thẳng

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Kết quả

Hướng dẫn canvas html la gì - canvas html là gì

  • Canvas – Vẽ hình tròn

    Để vẽ một hình tròn trên canvas, chúng ta sử dụng hàm

    var c = document.getElementById("myCanvas");
    
    4:

    • var c = document.getElementById("myCanvas");
      
      5

    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à

    var c = document.getElementById("myCanvas");
    
    6, bán kính
    var c = document.getElementById("myCanvas");
    
    7

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ả

Hướng dẫn canvas html la gì - canvas html là gì

  • 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:

    • var c = document.getElementById("myCanvas");
      
      8 – định kiểu chữ cho đoạn văn bản
    • var c = document.getElementById("myCanvas");
      
      9 – Viết chữ trên ô canvas
    • var ctx = c.getContext("2d");
      
      0 – Viết chữ trên ô canvas nhưng không tô màu chữ

    Ví dụ: Sử dụng

    var ctx = c.getContext("2d");
    
    1 viết một đoạn văn bản có chiều cao là
    var ctx = c.getContext("2d");
    
    2, dùng font
    var ctx = c.getContext("2d");
    
    3

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

Kết quả

Hướng dẫn canvas html la gì - canvas html là gì

  • 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:

    • var c = document.getElementById("myCanvas");
      
      8 – định kiểu chữ cho đoạn văn bản
    • var c = document.getElementById("myCanvas");
      
      9 – Viết chữ trên ô canvas

    var ctx = c.getContext("2d");
    
    0 – Viết chữ trên ô canvas nhưng không tô màu chữ

    Ví dụ: Sử dụng

    var ctx = c.getContext("2d");
    
    1 viết một đoạn văn bản có chiều cao là
    var ctx = c.getContext("2d");
    
    2, dùng font
    var ctx = c.getContext("2d");
    
    3

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

Canvas – Gradients

Hướng dẫn canvas html la gì - canvas html là gì

  • 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:

    var ctx = c.getContext("2d");
    
    4 – Quét màu xuất phát từ 1 phía

    • ctx.fillStyle = "#FF0000";
      ctx.fillRect(0,0,150,75);
      
      3

    var ctx = c.getContext("2d");
    
    5 – Quét màu xuất phát từ tâm

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

Canvas – Gradients

Hướng dẫn canvas html la gì - canvas html là gì

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:

  • var ctx = c.getContext("2d");
    
    4 – Quét màu xuất phát từ 1 phía
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
1

Canvas – Gradients

Hướng dẫn canvas html la gì - canvas html là gì

  • 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:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>
2

Canvas – Gradients

Hướng dẫn canvas html la gì - canvas html là gì

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:

var ctx = c.getContext("2d");
4 – Quét màu xuất phát từ 1 phía

var ctx = c.getContext("2d");
5 – Quét màu xuất phát từ tâm

Hàm var ctx = c.getContext("2d"); 6 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 var ctx = c.getContext("2d"); 7 và var ctx = c.getContext("2d"); 8. Sau khi thiết lập gradient, ta dùng var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); 1 hoặc ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); 0 để gán gradient vào ô canvas.

  • Ví dụ: Dùng
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    
    1
  • Kết quả:

Canvas – Hình ảnh