logo-alantien

Thẻ canvas trong html5 là gì | 10 Ví dụ vẽ hình bằng canvas

Tác giả: Alan Tiến

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:

Kết quả sẽ là:

canvas

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:

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.

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

Vậy là ta có được một đường thẳng với độ rộng là 20 pixel, có màu đỏ.

ve-duong-thang-trong-canvas-html5
Xem bản demo

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.

Kết quả sẽ là:

ve-duong-thang-trong-canvas-html5-lineCap

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.

Chúng ta sẽ có hình :

 

ve-duong-thang-trong-canvas-html5-lineto

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.

Thẻ canvas trong html5 là gì | 10 Ví dụ vẽ hình bằng canvas
3 (60%) 2 votes

Bạn có thể tìm thấy bài viết Thẻ canvas trong html5 là gì | 10 Ví dụ vẽ hình bằng canvas với các từ khóa sau:-,

like

Gửi bình luận

loading...
  • Key đang SEO Top