Bắt đầu với canvas trong HTML5

Việc sử dụng flash trên nền web chắc không còn xa lạ gì với chúng ta. Ai đã dùng thì chắc ít nhiều cũng bị nó làm phiền với nhiều lý do như load trang web lâu hơn, phải cài flash player để có thể chạy … Có bao giờ bạn nghĩ đến một cái nào khác có thể thay thế và làm tốt hơn flash trên nền web? Có đấy! đó chính làcanvas. Một phần tử mới trong phiên bản html5, nó rất mạnh mẽ trong việc làm đồ họa, game, tương tác với video – audio .. sử dụng javascript.  Trong bài viết này mình sẽ hướng dẫn các bạn làm quen với nó.

Yêu cầu: bạn cần phải có kiến thức về javascript.

Để bắt đầu làm việc vớicanvas bạn cần phải tạo một phần tửcanvas như sau:

Không có gì mới ngoài thẻcanvasphải không nào. Id và width – height các bạn có thể thiết lập theo ý bạn. Thuộc tính width, height chính là độ rộng và cao của vùng làm việc (vùng mà các bạn sẽ thao tác, vẽ vời trên đây), id là thuộc tính mình dùng để lấy phần tử canvas này thông qua javascript hoặc jquery và style border cho canvas để có thể nhìn thấy rõ phạm vi của vùng làm việc.
Trước khi đi đến phần kế tiếp các bạn phải biết và hiểu tọa độ trêncanvas. 

Tọa độ trên Canvas
Tọa độ trêncanvas bắt đầu tại góc trái bên trên với tọa độ X=0, Y=0 (chấm xanh trên hình). Đây là điểm gốc để dựa vào đó chúng ta có thể tính góc cho các điểm còn lại.

Cách tính điểm X và Y trong tọa độ
Để tính tọa độ cho một điểm bất kỳ các bạn tính bằng cách sau: Từ điểm cần tính gióng lên vuông góc với trục X đồng thời gióng sang vuông góc với trục Y. Trên hình điểm A là điểm ta cần tính. A gióng lên trục X giao nhau tại A2, A gióng lên trục Y giao nhau tại A1 vậy ta có tọa độ của A với X = A1->A (khoảng cách từ A1->A), Y = A2->A(khoảng cách từ A2->A).
Chúng ta đã tạo được phần tửcanvas, hiểu được tọa độ trên vùng làm việc củacanvas. Bây giờ chúng ta có thể tiếp tục. Trong hướng dẫn tiếp bên dưới mình sử dụng cả javascript và jquery vì vậy các bạn nhớ thêm thư viện jquery vào nhé.
Bây giờ chúng ta bắt đầu với vẽ hình chữ nhật với 1 đoạn script bên dưới:
$(document).ready(function()

canvas = document.getElementById("cv"); //lấy phần tử canvas có id là cv

ct = canvas.getContext("2d"); //sử dụng phương thức " getContext " với tham số truyền vào là "2d" để lấy đối tượng vẽ trên canvas. Đối tượng này cung cấp các thuộc tính và phương thức giúp ta có thể vẽ trên canvas

ct.fillStyle = "blue"; //sử dụng thuộc tính fillStyle của đối tượng "ct" đổ màu cho hình.

ct.fillRect(100,100,200,200); //vẽ hình chữ nhật tại tọa độ x1=100, y1=100 và x2 = 200, y2=200

);


Và đây là kết quả:

Thực hành Canvas đơn giản
Thật đơn giản đúng không. Các bạn có thể thay đổi giá trị màu và tọa độ để có các giá trị khác nhau tương ứng.
Nâng cao hơn một chút, bây giờ mình sẽ hướng dẫn các bạn vẽ hình chữ nhật bằng chuột thay vì dùng code cứng. Bên dưới là đoạn code hướng dẫn:
$(document).ready(function()

canvas = document.getElementById("cv"); //lấy phần tử canvas

ct = canvas.getContext("2d"); //lấy đối tượng vẽ thông qua phương thức của phần tử canvas

drag_flag = false; //biến lưu giữ trạng thái chuột, giống như cờ báo hiệu (nếu click chuột trái và di chuyển thì biến sẽ được thiết lập "true")

coordinates = new Object(); //tạo đối tượng lưu trữ tọa độ cần vẽ

cvs = $('#cv'); //lấy phần tử canvas sử dụng jquery

cvs.mousedown(function(e)  //bắt sự kiện chuột click xuống canvas

coordinates.x1 = e.pageX - cvs.offset().left; //lấy tọa độ chuột khi bấm xuống tại canvas (X)

coordinates.y1 = e.pageY - cvs.offset().top; //lấy tọa độ chuột khi bấm xuống tại canvas (Y)

drag_flag = true; //bật cờ báo hiệu có thể vẽ

);

cvs.mouseup(function(e) //bắt sự kiện thả chuột (khi mới click xuống)

drag_flag = false; //tắt cờ báo hiệu ngừng vẽ

);

cvs.mousemove(function(e) //bắt sự kiện di chuyển chuột

if(drag_flag)//kiểm tra cờ, nếu bật có nghĩa được phép vẽ

coordinates.x2 = e.pageX - cvs.offset().left - coordinates.x1; //tọa độ chuột khi đang bấm và di chuyển (X)

coordinates.y2 = e.pageY - cvs.offset().top - coordinates.y1; //tọa độ chuột khi đang bấm và di chuyển (Y)

ct.clearRect(0,0,cvs.width(), cvs.height()); //làm trắng canvas trước khi vẽ

ct.fillRect(coordinates.x1,coordinates.y1,coordinates.x2, coordinates.y2); //vẽ hình với tọa độ lấy được trong đối tượng "coordinates"



);

);



Mặc định nếu không đổ màu là đen. Các bạn có thể đổ màu tương tự như ví dụ đầu bằng cách sử dụng thuộc tính fillStyle của đối tượng context.
Lời kết
Bước đầu làm quen vớicanvas, theo mình đến đây là tương đối đủ rồi. Các bạn hãy nhớ tự thực hiện lại hướng dẫn để có thể hiểu rõ và thuần thục hơn, từ đó mới có thể theo tiếp các bài hướng dẫn tới của mình.
Các bạn thấycanvas thế nào? Không quá khó đúng không. Vớicanvas bạn có thể làm được rất nhiều thứ hay nữa. Nhưng trước hết bạn nên bắt đầu từ những cái căn bản như thế này.
Hy vọng bài viết này sẽ giúp được các bạn mới bắt đầu phần nào hiểu hơn vềcanvas. Trong bài viết tới mình sẽ hướng dẫn các bạn vềline trongcanvas.













(Nguồn Thạch Phạm)

Share on Google Plus

About thuthuattinhoc

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.