canvas 的一些簡單運用
首先canvas作為html5新出現的標籤,也像其他所有dom物件一樣有他自己本身的屬性、方法和事件,其中就有繪圖的方法,然後用我們可以用js呼叫它來進行繪圖 語法 例:
<canvas id="myCanvas" width="400" height="400"></canvas>
可以看到canvas元素自身也有兩個屬性 width 和height 此外也有其他的html的一些主要屬性 比如 class id name 等
在這裡 JavaScript就是使用這裡建立的canvas的id來表示要在上面繪畫的畫布。 方法如下:
var cvs = document.getElementById("myCanvas"); //IE 6 7 8 不支援 <canvas>標籤
每個畫布都必須有一個context(上下文)的定義。一般情況下官方規範只承認一種2D環境;
var ctx = cvs.getContext("2d");
之後我們就可以進行繪畫了
Canvas的座標
分為x y (從0開始 想右向下 x y 都為正數 不能為負 負的話 超出畫布 就不會顯示了)
一些相關語法
ctx.beginPath() :開始一個路徑
ctx.moveTo(x,y): 路徑移到畫布中的指定點 , 即起點
ctx.lineTo(x,y) :新增一個新點,畫線 ......
ctx.closePath() :關閉繪製路徑
ctx.fillStyle:用來設定填充顏色
ctx.fill() :填充已定義好的路徑
ctx.lineWidth:畫線的寬度
ctx.strokeStyle:用來設定描邊顏色
ctx.stroke() :繪製已定義好的路徑
矩形繪製
rect(x,y,w,h): x、y為起始座標,w、h為矩形的寬、高 支援這麼寫: ctx.fillRect(x,y,w,h) 及 ctx.strokeRect(x,y,w,h)
圓形繪製
arc(x,y,r,sa,ea,true/false): x、y為圓心座標,r為半徑, sa、ea分別為起始角度和結束角度, true是逆時針畫圓,false是順時針畫圓; 360度角即2PI弧度,1度就是2PI/360=PI/180弧度, 90度就是2PI/360*90=PI/2弧度(其他的角度自行計算)
繪製文字
fillText(text,x,y,maxWidth): 填充繪製 text表示文字 x、y為座標 maxWidth可選,為文字最大寬度,防止文字溢位 strokeText(text,x,y,maxWidth): 描邊繪製 text表示文字 x、y為座標 maxWidth可選,為文字最大寬度,防止文字溢位;
常用屬性設定: font 文字內容的當前字型屬性 示例: ctx.font = 'bold 60px 微軟雅黑';(順序不能改) textAlign 文字內容的當前對齊方式(一般不需要) 示例: ctx.textAlign="left"; ctx.textAlign="right"; (左右是根據你定的xy座標來定的-左-最左邊在座標;右-最右邊在座標 ↓上下文字基線一樣性質) textBaseline 繪製文字時使用的當前文字基線 示例: ctx.textBaseline="middle"; ctx.textBaseline="top"; ctx.textBaseline="bottom";
*號為重點:
1、系統預設在繪製第一個路徑的開始點為beginPath
*2、如果畫完前面的路徑沒有重新指定beginPath, 那麼畫第其他路徑的時候會將前面最近指定的beginPath後的全部路徑重新繪製
3、每次呼叫context.fill()的時候會自動把當次繪製的路徑的開始點和 結束點相連,接著填充封閉的部分 *記住每次畫路徑都在前後加context.beginPath() 和context.closePath()就行
清除畫布:
ctx.clearRect(x,y,width,height):
x : 清除起點橫座標
y : 清除起點縱座標
width : 清除長度
height : 清除高度
清除畫布: ctx.clearRect(0,0,cvs.width,cvs.height);