canvas元素在html5中的使用方法
作者：佚名 時間：2014-06-28 分享到：
canvas元素之所以被如此命名是因為它被用于繪制圖形,就像黑色油畫布一樣,繪制操作通過專用api的javascript實現,這將創建一個量身定做的位圖圖形,另外,這個元素的確與繪畫者的畫布十分相似,因為一旦在這個元素上進行繪圖,那么就無法在繪制之后操縱這些已經繪制出的圖形.這些圖形不是類似于svg元素的對象,而只是屏幕上的像素;用戶只能通過再次繪制來覆蓋它們.
canvas元素的基礎設置極為簡單,將一個canvas元素,以及不支持canvas(或javascript)的瀏覽器的尺寸屬性以及后備內容,添加到用戶的標記中:
以后我們將所有操作都是通過javascript實現的.第一步是選擇canvas并創建一個背景,這是用戶即將在其上進行繪制的畫布的名稱.通過使用getcontext()類函數并將一個背景作為其參數可以實現上述操作.對于簡單的二維圖形,這參數的值為2d.這個例子還添加了一些特性測試以確保瀏覽器支持canvas api.上述操作的代碼如下所示:
下面開始繪制過程.對于svg,繪制是通過在坐標系中使用一系列圖形和線條來實現的,例如,要想繪制一個含有填充顏色的矩形,則需使用fillrect()類函數.這類函數接收四個數值參數;前兩個參數分別是矩形左上角的x坐標和y坐標;后兩個參數分別是矩形的寬和高.下面的代碼繪制了一個120,120的正方形,這正方形內部填充了顏色,且與canvas元素左上角的距離為20px;
context.fillrect(20,20,120,120)
通過一系列api屬性,用戶還可以更改八進制對象的外觀值,當一個在canvas上八進制圖形的函數再次運行時,上述api屬性將被應用.
如沒特殊注明，文章均為上海聯楷網絡原創,轉載請注明來自：http://www.ktcbnqb.cn/help/20151126/n1814.html
