Thực tập.
Trên html 5
canvas có lót ô vuông cạnh 20 pixels, chúng ta vẽ một hình chữ nhật tô
màu xanh lá cây và một hình tròn tô màu vàng và viết thêm function convertCanvas(){
window.location=canvas.toDataURL("image/png");} dùng để chuyển đổi hình trong canvas
thành hình png hay gif .
Nếu không chọn trước format của hình thì default sẽ tự
động chuyển hình thành dạng png.
 |
| Đây là html 5 Canvas Script vẽ hình bitmap và save trong computer với dạng png |
Nếu viết trong
notepad đầy đủ như script trên, mở browser Chrome, hình số 1 xuất hiện gồm
có một khung canvas màu đỏ có lót
ô vuông, một hình chữ nhật màu xanh và một hình tròn màu vàng đã
vẽ như ý muốn.
Hình số 1 là
dạng bitmap vẽ trong browser .Hình số 1 nếu muốn save trong My pictures thì
sẽ hiện ra một browser icon chứ
không phải hình .Do đó phải tìm cách chuyển đổi nó thành dạng hình
png,gif, jpeg…có thể save trong computer để xử dụng khi cần.
Khi click chữ
CLICK TO CONVERT,hình số 1 biến mất, hình số 2 hiện ra. Hình số 2 là dạng png và khung canvas
màu đỏ không còn.
Click bên phải
con chuột sẽ có chữ “ Save image as “ hiện ra . Click vaò chữ nầy để
chọn chỗ mà chúng ta muốn save như My pictures,desktop….Thí dụ chúng ta
chọn chỗ để save là My pictures.
Trong window.location=canvas.toDataURL("image/gif"); chúng ta có thể chọn dang hình là gif
thay cho png.
Trên canvas muốn
thu nhỏ hình nào thì viết thêm ctx.scale(…)
trên ctx.beginPath() của hình đó.
Thí dụ chúng
ta muốn thu nhỏ hình màu đỏ bằng ½ hình cũ thì viết thêm vào script
trên những code sau đây.
ctx.scale( 0.5,0.5
)
ctx.beginPath()
;ctx.moveTo(140,180);ctx.bezierCurveTo(260,200,120,80,140,179) ;
ctx.fillStyle="red";
ctx.strokeStyle="blue"; ctx.fill() ; ctx.stroke()
ctx.beginPath()
;ctx.moveTo(140,180);ctx.lineTo(260,200) ;
ctx.strokeStyle="green";ctx.stroke()
ctx.beginPath()
;ctx.moveTo(120,80);ctx.lineTo(140,179) ;
ctx.strokeStyle="green";ctx.stroke()
