< CANVAS >

這是一個只能在firefox瀏覽器中看到的tag
主要的功能是拿來畫圖
因為昨天我突然開始想用程式碼畫個圖擺在網誌上所以找到這個
不過呢!~畫完之後竟然無法擺進網誌裡= =" 突然感覺用blogger的限制很多
這篇的用意是什麼呢!~沒錯就是canvas的使用教學!!

在使用前我們需要一些前置的語法：
◎宣告JAVASCRIPT
< type="application/x-javascript">
◎呼叫FUNCTION
function draw() {
//宣告DOM物件
var canvas = document.getElementById("canvas");
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
//宣告ctx為一個2d的繪圖內容
var ctx = canvas.getContext("2d");

//中間可以開始畫畫了 XD

//結束用括號
}//IF
}//FUNCTION
◎< >中要加入呼叫FUNCTION
< onload="draw()">
◎將<>鉗入HTML裡的<>中
< id="canvas" width="300" height="300">< /canvas >
◎最後補上< /script >表示結束

上面是基本的前置動作，注意事項
JAVASCRIPT的宣告要在<>裡
FUNCTION的宣告要在<>前(因為要被呼叫)
完成這些基本程式碼後我們就可以開始正式使用囉!!
他可以畫出的圖形有以下：

矩形→
fillRect(x,y,width,height)
strokeRect(x,y,width,height)
clearRect(x,y,width,height)
XY為起始座標，後面是長跟寬，fill是填滿、stroke是只有外框、clear是清除< /span >

路線→
beginPath()
closePath()
moveto(x,y)
lineto(x,y)
stroke()
fill()
XY是座標，move的話只是點移過去，line才是正式畫線
beginpath要先宣告出來才可以開始畫線
如果起始的點跟結尾點不是同一個可以用close封起來
最後可以用stroke來畫線，或是用fill填出一個不規則形

圓形→arc(x, y, radius, startAngle, endAngle, anticlockwise)
這是我覺得最複雜的東西
XY是圓心座標、radius是半徑
Angle是角度的意思，起始角度通常為0，指的是圓最右邊的切點
結束角度通常我們用Math.PI*2來代表畫一個圓 Math.PI的話就是畫半圓
(註 Math.PI 就是圓周率的意思，在這裡我們也可以發現這裡可以使用asp.net的函式庫)
anticlockwise的值是true的話表逆時針畫圖，false表順時針

顏色→fillstyle
這個部分比較多變化，請直接參考原網頁XD

以上就是我所學會的一些基本畫圖函式，對於一些基本圖形很夠用了!~
要注意的是這些函式都屬於< /span >< style="font-family:trebuchet ms;">canvas.getContext
所以在用的時候要加上宣告的變動，以本文為例就是ctx.startpath()、ctx.fill()、etc.
that'all !下次有學到新的東西再來po教學文哈哈


附上原文網址

還有我上網查到的blog教學

原文中文化