Hướng dẫn vẽ hình HTML5 bằng canvas cơ bản

Đăng ngày 12/05/2012 lúc 16:14 bởi phong | Bình luận: (Chưa có)

Chào các bạn, ở các bài trước mình đã giới thiệu cơ bản html5 với chủ đề thiết kế web cơ bản và thiết kế web seo trong tương lai.

Bài viết này mình sẽ chia sẻ một trong những tính năng mới của html5 đó là khả năng vẽ hình bằng mã html, tag canvas cơ bản. Đây cũng sẽ là một xu hướng cho thiết kế web seo làm nền menu, danh mục … vì khi vẽ hình bằng mã html sẽ nhẹ hơn rất nhiều so với hình ảnh .jpg hay .png.

Để hiểu được bài viết này, mời các bạn tham khảo trước bài viết giới thiệu html5

http://seoweb24h.com/thiet-ke-web/kien-thuc-co-ban-html5/

Đầu tiên, xin giới thiệu thẻ canvas, thẻ canvas hỗ trợ cho html có thể vẽ hình, nhúng các spript vào tag. Sau đây là một ví dụ, chúng ta sẽ cùng vẽ hình sau đây với kích thước sau: width=500, height=300, mắt trái = vị trí bắt đầu (100,90) kích thước 50×4, mặt phải = vị trí (400,90)

canvas1_html5

Bước 1:

Mở một file html5. Do canvas sẽ nhúng script nên chúng ta mở một đoạn script trên head (trước khi đóng thẻ head).

</script>

Bước 2:

Mở một function trong script với tên “ve” hoặc tên nào đó tùy các bạn nhé.

function ve(){

}

Và định cấu hình body load từ script trên.

Bước 3:

Mở thẻ canvas trong body, định kích thước cho canvas.

Và mở canvas trong script bằng đoạn code sau:

var canvas = document.getElementById(‘canvas’);

if (canvas.getContext){

var ctx = canvas.getContext(’2d’)

}

Như vậy là chúng ta đã hoàn tất việc mở thẻ canvas rồi đấy, đương nhiên vẫn chưa thấy gì trên màn hình đâu. Và bây giờ ta sẽ bắt đầu vẽ.

Định màu cho khung nền với mã màu rgb(31,102,246).

ctx.fillStyle = “rgb(31,102,246)”;

ctx.fillRect (0, 0, 500, 300);

Vẽ sharp, các hình trong khung nền: ta mở thẻ beginPath, để cho tiện dụng trong việc thiết kế thì các bạn đóng thẻ bằng closePath luôn nhé. Sau đó, chỉ việc viết các shape giữa 2 thẻ này.

ctx.beginPath();

ctx.closePath();

Tô màu nền cho các sharp:

ctx.fillStyle = ‘yellow’;

Bắt đầu vẽ con mắt bên trái, điểm xuất phát tại tọa độ (100,90)

ctx.moveTo(100,90);

Bây giờ các bạn xem việc thiết kế web giống như học hình học hệ tọa độ X,Y. Từ điểm (100,90) di chuyển đến 3 điểm sau và kết thúc sẽ tạo ra hình vuông cạnh 50px.

ctx.lineTo(150,90);

ctx.lineTo(150,140);

ctx.lineTo(100,140);

canvas2_html5

Thử nhẫm tính xem đúng không nhé. Và kế tiếp vẽ cái miệng, con mắt phải bằng 2 đoạn tương tự này.

ctx.moveTo(220,250);

ctx.lineTo(280,250);

ctx.lineTo(280,255);

ctx.lineTo(220,255);

ctx.moveTo(350,90);

ctx.lineTo(400,90);

ctx.lineTo(400,140);

ctx.lineTo(350,140);

Vậy là hoàn tất rồi, các bạn có làm được không. Mình xin copy toàn bộ đoạn code html, các bạn làm không được thì copy y chang để các bạn đối chiếu nh.

<!DOCTYPE HTML>

<html>

<head>

<title>seoweb24h</title>