VẼ HÌNH BITMAP VỚI HTML 5 CANVAS

DRAWING BITMAP IMAGES WITH HTML 5 CANVAS.
HTML 5 Canvas không tốn tiền nên không cần mua Adobe Flash Player.
Xử dụng HTML 5 canvas không cần plug-ins nhưng vẽ rất nhanh vì nhờ browser làm việc thay cho CPU.
Trên HTML 5 canvas chúng ta có thể vẽ  được các loaị hình, các đường cong từ đơn giản tới phức tạp như automobile-body nhờ Bézier curves

Thực tập.Trong canvas có khung màu đỏ,chúng ta vẽ một đường cong màu green có bề dày 2 px và một đường thẳng dày 1 px màu blue.Sau đó đem một hình đã vẽ thuộc dạng gif hay png chứa sẵn trong My documents vào trong đường cong như bức hình nầy.

1 - CÁCH DỰNG LẬP CANVAS LÓT ĐẦY Ô VUÔNG .
How to draw grids on HTML 5 canvas.

Trước tiên chúng ta phải dựng lập một một canvas theo tiêu chuẫn W3C.Canvas là khung hình chữ nhật có kích thước đo bằng pixel và rộng lớn bao nhiêu tùy theo hình mà chúng ta sẽ vẽ.Nếu không xác định kích thước cho canvas thi default sẽ cho kích thước 300x150 px

Để có thể thấy dễ dàng kích thước của hình chúng ta sẽ vẽ và cũng để hiểu cho sâu, chúng nên  lót đầy ô vuông trên canvas trước khi vẽ hay trước khi đem hình từ trong My documents vào canvas.

 Trong bài nầy chúng ta tạo canvas có kích thước 300x200 px và vẽ ô vuông có độ rộng là 20 pix với cách viết script nhưsau.

Đây là canvas script sẽ làm xuất hiện một canvas lót đầy
 ô vuông như hình phía dưới

Nếu chép script trên vào notepad rồi mở browser Google Chrome chúng ta sẽ có một canvas lót đầy ô vuông giống hình nầy.

Đây là hình canvas lót đầy ô vuông có cạnh 20 pix

2 - VẼ ĐƯỜNG CONG,ĐƯỜNG THẲNG VÀ ĐEM HÌNH VÀO CANVAS.

21-Vẽ đường cong

Với canvas đã có chúng ta thử vẽ trắc nghiệm một đường cong goị làbézierCurve.Muốn vẽ được đường cong nầy bắt buộc phải viết vào canvas script đã có ở trên như sau.

ctx.beginPath();

ctx.moveTo(80,80) ; ctx.bezierCurveTo(30,30,130,230,200,100);

ctx.strokeStyle = "green" ;

ctx.lineWidth = 2 ;

ctx.stroke() ;

 Hình dạng,vị trí,màu sắc và bề rộng của đường cong thay đổi tuỳ theo những con số chúng ta tự chọn lấy.

Đường cong bắt đầu từ tọa độ ( 80,80), vòng qua bên trái ở tọa độ (30,30 ),bọc xuống tọa độ (130,230 ) rồi dừng lại ở tọa độ (200,100).

Tọa độ dừng lại gọi là end point.Tọa độ bắt đầu gọi là start point.Hai tọa độ đi vòng gọi là 2 control points.
Nếu đường cong Bézier Curve chỉ có một control point thì gọi là quadratic bézier curve

Công thức vẽ đường cong  bézier curve có thể nhớ như sau.

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y). cp1 là control point 1,cp2 là control point 2 và x,y là của end point.
Còn công thức vẽ quadratic bézier curve thì viết quadraticCurveTo(cp1x, cp1y, x, y)

Sau khi viết thêm phần chữ màu tím vào canvas script , mở browser Chrome sẽ thấy đường cong xuất hiện như hình nầy.

Vẽ đường cong Cubic Bézier Curve

Nhờ những ô vuông trên canvas, chúng ta thấy rõ vị trí khởi hành ( 80,80 ) và vị trí dừng lại (200,100) của đường cong hòan tòan đúng như đã chọn .

Còn vị trí của 2 control points không thấy. Muốn thấy phải làm gì ? .

Xem phần cuối của bài nầy  :"  Xác định được vị trí của Bézier curve control points  trên canvas có ô vuông ?"

22-Vẽ đường thẳng;

Chép những câu nầy vào canvas script đã có sẳn.
ctx.beginPath()

ctx.moveTo(60,80);ctx.lineTo(100,50);ctx.strokeStyle="blue";

     ctx.lineWidth = 1 ;

     ctx.stroke();

Chúng ta sẽ thấy trên canvas có một đường thẳng xuất phái từ tọa độ ( 60,80) và dừng lại ở tọa độ (100,50)

Vẽ đường cong Cubic Bézier Curve và đường thẳng

23- Đem hình từ ngoài vào canvas.
How to insert an image to HTML 5 canvas

Cũng trong canvas script đã có sẳn,chép những câu nầy vào đó để đem bất cứ một hình nào đã vẽ  chứa sẳn trong My documents .Thí dụ hình có tên"hoaeaster.gif" do người viết bài nầy đã vẽ năm 2011.

var img = document.getElementById("hoa");

      ctx.drawImage(img,100,30,90,100);

 Và lưu ý phải chép thêm câu sau đây vào phía trên script tag và đặt trong tags

img id="hoa" src="hoaeaster.gif"  width="50" height="75"

 Tên của bức hình do quý bạn chọn, là hình chụp hay hình vẽ và nhớ phải có sẳn trong My documents.

Đây là script của bức hình ở đầu bài nầy
Script showing how to draw images on HTML 5 canvas

3- XÁC ĐỊNH VI TRÍ CỦA BEZIER CURVE CONTROL POINT TRÊN CANVAS.

How to find  the bézier curve control points on canvas?

Đường cong Bézier curves do kỹ sư người Pháp tên là Pierre Bézier (1910-1999) phát minh ( patented by P.Bézier) năm1962 dùng để vẽ thùng xe hơi trong thời gian ông làm việc tại công ty  Renault .

Bézier curves rất tiện lợi khi dùng để vẽ các hình có những đường cong phức tạp mà phương pháp arc method ()  thí dụ như arc(75,75,35,0,Math.PI,false) không thể giúp gì được.

Đường cong Bezier có hai loại chính được áp dụng nhiều nhất là quadratic Bezier  curve và cubic Bezier curve.

Quadratic Bezier curve có một start point,một end point và một control point.

Cubic Bezier curve có một start point, một end point và hai control points.

Khi vẽ đường cong Bezier cần nhớ như sau.

quadraticCurveTo(cp1x, cp1y, x, y )

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y )

Dựa vào toán đại số, chúng ta biết control points của đường cong Bezier nằm trên đường tiếp tuyến thứ nhứt với Bezier curve tại start point và trên đường tiếp tuyến thứ hai tại end point.

Control point điều khiển chiều hướng của tiếp tuyến, làm thay đổi hình dáng của đường cong và ở cách xa đường cong.

Để tìm xem tọa độ x, y của control point mà chúng ta đã chọn có nằm đúng vị trí trên canvas có ô vuông hay không, chúng ta làm lần lượt như sau.

* Vẽ một đường cong quadratic curve màu đỏ.

ctx.beginPath();ctx.moveTo(60,60);

ctx.quadraticCurveTo(100,180,240,60);ctx.lineWidth= 1;

ctx.strokeStyle="red";ctx.stroke();   

* Vẽ một đường thẳng màu xanh từ tọa độ của start point (60,60);tới tọa độ của control point (100,180);.

ctx.beginPath();ctx.moveTo(60,60);ctx.lineTo(100,180);

ctx.lineWidth=1;ctx.strokeStyle="blue";ctx.stroke();

* Vẽ một đường thẳng thứ 2 màu green từ tọa độ của end point(240,60); tới tọa độ của control point (100,180);.

ctx.beginPath();ctx.moveTo(240,60);

ctx.lineTo(100,180);ctx.lineWidth= 1;

ctx.strokeStyle="green";ctx.stroke();

Mở browser Chrome, chúng ta thấy control point là giao điểm của 2 đường tiếp tuyến và giao điểm nầy nằm đúng vị trí  trên canvas có ô vuông.

Vẽ đường cong Quatratic Bezier Curve và
tìm vị trí của control point

Nếu chúng ta muốn vẽ đường cong cubic Bezier curve thì nhớ cần phải có tọa độ start point, tọa đô end point và toạ độ của 2 control points

Thí dụ.

Vẽ đường cubic Bezier màu đ̉ỏ và hai đường đường thẳng có tọa độ như dưới đây.

ctx.beginPath();ctx.moveTo(60,60);

ctx.bezierCurveTo(100,180,140,50,240,60);ctx.lineWidth= 1;

ctx.strokeStyle="red";ctx.stroke();   

ctx.beginPath();ctx.moveTo(60,60);ctx.lineTo(100,180);

ctx.lineWidth=1;ctx.strokeStyle="blue";ctx.stroke();

ctx.beginPath();ctx.moveTo(240,60);

ctx.lineTo(140,50);ctx.lineWidth= 1;

ctx.strokeStyle="green";ctx.stroke();

Vẽ đường cong Cubic Bézier Curve và 
tìm vị trí của 2 control points

Mở browser Chrome chúng ta thấy hình nầy xuất hiện.Tọa độ của control point 1 (100,180) và control point 2 (140,50) nằm đúng vị trí trên canvas có ô vuông.
Bài kế tiếp." How to save html 5 canvas images "
Hình vẽ trên canvas là hình bitmap vẽ trong browser.Nếu browser biến mất thì hình cũng biến mất theo.Do đó phải có cách nào tồn trử hình đó trong My pictures để xử dụng khi cần ?