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.
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.
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 Bézier Curves
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.
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
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)
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 Bezier 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 :" Làm thế nào có thể
xác định được vị trí của 2 control points của bézier curve trên canvas co ô 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.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 Bezier Curve và đường thẳng |
23- Đem hình từ ngoài
vào canvas.
How to insert an image to HTML 5 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 Quadratic 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 Bezier Curve và tìm vi tri của 2 đểm 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 chuyển đổi nào để tồn trử hình đó trong My pictures để xử dụng khi cần ?