Thẻ canvas là gì
Canvas là một thẻ đặc biệt trong HTML5 mà chúng ta nên biết tới. Thẻ canvas được dùng để hiển thị một tập hợp các đối tượng tạo nên một Graphic theo ý muốn. Để thực hiện được điều này chúng ta cần sử dụng các API mà HTML5 đã cung cấp cho chúng ta. Khi hiển thị trên website bản thân tag canvas sẽ là dạng ảnh PNG.
Để tìm hiểu kỹ hơn về thẻ canvas các bạn hãy xem ví dụ bên dưới:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<canvas id="alan_canvas" width="600" height="300"> Thẻ Canvas không hỗ trợ trên trình duyệt </canvas> <script> var canvas = document.getElementById('alan_canvas'), context = canvas.getContext('2d'); context.font = '32pt Arial'; context.fillStyle = 'cornflowerblue'; context.strokeStyle = 'blue'; context.fillText("Học Canvas", canvas.width/2 - 150, canvas.height/2 + 15); context.strokeText("Học Canvas", canvas.width/2 - 150, canvas.height/2 + 15 ); </script> |
Kết quả sẽ là:
Qua ví dụ trên chúng ta thấy rằng thẻ canvas hiển thị một hình ảnh do đoạn mã Javascript. Chúng được kết nối với nhau qua id của thẻ canvas.
Cấu trúc HTML <canvas> Tag
Để có thể sử dụng thẻ canvas chúng ta cần theo cấu trúc sau
<canvas id=”myCanvas”></canvas>
<script>Các API của canvas</script>
Các trình duyệt hỗ trợ cho tag canvas
Thẻ canvas được xem là tương lai của người phát triển web và ứng dụng html. Thế nên những trình duyệt sau này đều hỗ trợ hiển thị canvas một cách đầy đủ nhất. Các bạn nhớ cập nhật trình duyệt bản mới nhất để không phát sinh lỗi nhé.
| HTML Tag | |||||
|---|---|---|---|---|---|
| <canvas> | Yes | Yes | Yes | Yes | Yes |
Những ví dụ vẽ hình bằng canvas đơn giản
Vẽ đường thẳng bằng canvas:
Để có thể vẽ đường thẳng bằng canvas chúng ta phải xác định được vị trí bắt đầu và vị trí kết thúc. Với mỗi vị trí sẽ được xác định bởi khoảng cách so với lề trái và khoảng cách so với lề trên ( chỉ có trái với trên thôi nha các bạn).
Ví dụ 1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<canvas id="myCanvas" width="300" height="200"></canvas> <script> // Lấy đối tượng Canvas theo Id var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ là 2D var context = canvas.getContext('2d'); // các bước vẽ canvas context.beginPath(); // Tạo đường thằng mới context.moveTo(5, 5); // Điểm bắt đầu context.lineTo(500, 190); // Điểm kết thúc context.stroke(); // Tiến hành vẽ đường thẵng </script> |
Các hàm có trong ví dụ:
- Ta có Hàm
beginPath()dùng để khai báo một đường thẳng mới trong canvas - Hàm
moveTo(position)dùng để xác định điểm bắt đầu đường thằng (trái, trên). - Sử dụng hàm
lineTo(position)để xác định điểm kết thúc (trái trên) - Khi đã khai báo thì ta sử dụng
stroke()để tiến vẽ đường thẳng.
Tìm hiểu thẻ big html
Cách thuộc tính bổ sung khi vẽ đường thẳng trong cavas:
- Tăng chiều rộng ( độ dày của nét vẽ) ta sử dụng thuộc tính lineWidth. Ví dụ
context.lineWidth = 15;// rộng 15px - Để tô màu cho đường thẳng ta xài strokeStyle. Ví dụ
context.strokeStyle ='blue';// Màu xanh.
Để hiểu hơn mình sẽ cho 2 thuộc tính trên vào ví dụ 1 của chúng ta. Ta sẽ có ví dụ 2 như sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<canvas id="myCanvas" width="300" height="200"></canvas> <script> // Lấy đối tượng Canvas theo Id var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ là 2D var context = canvas.getContext('2d'); // các bước vẽ canvas context.beginPath(); // Tạo đường thằng mới context.moveTo(5, 5); // Điểm bắt đầu context.lineTo(500, 190); // Điểm kết thúc context.lineWidth = 20; // rộng 20px context.strokeStyle = 'red';// Màu đỏ context.stroke(); // Tiến hành vẽ đường thẵng </script> |
Vậy là ta có được một đường thẳng với độ rộng là 20 pixel, có màu đỏ.
Tiếp theo chúng ta sẽ có một thuộc tính định dạng 2 đầu đường thẳng (lineCap). Thuộc tính lineCap gồm các giá trị sau:
- butt : 2 đầu sẽ vuông góc tại điểm, có chiều bình thường
- round : Ta sẽ bo tròn 2 đầu, dài hơn bình thường một đoạn vì hai đầu bổ sung một đoạn bo tròn.
- square : bo 2 đầu thành hình chữ nhật, sẽ dài hơn bình thường do phải bổ sung đoạn hai đầu hình chữ nhật.
Để hiểu hơn về thuộc tính lineCap. Chúng ta sẽ đi đến ví dụ số 3.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/*ĐƯỜNG THẲNG SỬ DỤNG THUỘC TÍNH LINECAP:BUTT */ <canvas id="myCanvas1" width="300" height="200"></canvas> <script> // Lấy đối tượng Canvas theo Id var canvas = document.getElementById('myCanvas1'); // Chọn đối tượng vẽ là 2D var context = canvas.getContext('2d'); // các bước vẽ canvas context.beginPath(); // Tạo đường thằng mới context.moveTo(20, 20); // Điểm bắt đầu context.lineTo(200, 20); // Điểm kết thúc context.lineWidth = 20; // rộng 20px context.strokeStyle = 'red';// Màu đỏ context.lineCap = 'butt'; //bo vuông tại điểm context.stroke(); // Tiến hành vẽ đường thẵng </script> /*ĐƯỜNG THẲNG SỬ DỤNG THUỘC TÍNH LINECAP:ROUND */ <canvas id="myCanvas2" width="300" height="200"></canvas> <script> // Lấy đối tượng Canvas theo Id var canvas = document.getElementById('myCanvas2'); // Chọn đối tượng vẽ là 2D var context = canvas.getContext('2d'); // các bước vẽ canvas context.beginPath(); // Tạo đường thằng mới context.moveTo(20, 40); // Điểm bắt đầu context.lineTo(200, 40); // Điểm kết thúc context.lineWidth = 20; // rộng 20px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'round'; //bo tròn tại điểm context.stroke(); // Tiến hành vẽ đường thẵng </script> /*ĐƯỜNG THẲNG SỬ DỤNG THUỘC TÍNH LINECAP:SQUARE */ <canvas id="myCanvas3" width="300" height="200"></canvas> <script> // Lấy đối tượng Canvas theo Id var canvas = document.getElementById('myCanvas3'); // Chọn đối tượng vẽ là 2D var context = canvas.getContext('2d'); // các bước vẽ canvas context.beginPath(); // Tạo đường thằng mới context.moveTo(20, 20); // Điểm bắt đầu context.lineTo(200, 20); // Điểm kết thúc context.lineWidth = 20; // rộng 20px context.strokeStyle = 'pink';// Màu hồng context.lineCap = 'square'; //bo hình chữ nhật context.stroke(); // Tiến hành vẽ đường thẵng </script> |
Kết quả sẽ là:
Tiếp theo, chúng ta tìm hiểu cách vẽ đường thẳng nối tiếp nhau trong canvas
Thật ra để vẽ những đường thẳng nối tiếp nhau trong canvas không khó. Chỉ cần sử dụng thành thạo hàm lineTo(). Các bạn phải chú ý đến những đoạn nối nhau sau cho thật hợp lý là đc. Để hiểu rõ hơn, chũng ra sẽ đến với ví dụ số 4 vẽ hình zic zắc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<canvas id="myCanvas" width="300" height="200"></canvas> <script> // Lấy đối tượng Canvas theo Id var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ là 2D var context = canvas.getContext('2d'); // các bước vẽ canvas context.beginPath(); // Tạo đường thằng mới context.moveTo(5, 5); // Điểm bắt đầu context.lineTo(500, 190); // Điểm kết thúc context.lineWidth = 20; // rộng 20px context.strokeStyle = 'red';// Màu đỏ context.stroke(); // Tiến hành vẽ đường thẵng </script> |
Chúng ta sẽ có hình :
Xem demo tất cả các ví dụ
See the Pen Ví dụ vẽ đường thẳng bằng canvas |Thẻ canvas trong html5 by alantien (@alantien) on CodePen.0
Kết luận về canvas
Canvas trong html5 sẽ mở ra một kỷ nguyên mới cho các lập trình game web cũng như các ứng dụng về website. Các bạn hãy nắm vững những kỹ thuật trong canvas. Thật ra không phải chỉ vẽ được đường thẳng, mà cũng ta còn vẽ được rất nhiều thứ khác. Để hiểu hơn về canvas, mình sẽ viết một loạt bài về canvas trong một serial khác. Còn ở bài này chủ yếu các bạn nắm rõ cho mình các sử dụng, khởi tạo, cũng như các thuộc tính trong canvas html5 nha.
