HTML5 十大新特性(四)——Canvas繪圖

標籤：pat   直線   txt   alpha   垂直   儲存繪圖   上下   font   html   

　　H5引入了canvas標籤，預設是一個300*150的inline-block。canvas的寬高只能用它自身的width和height屬性來指定，而不能使用css樣式中的width、height。

　　一、獲得‘畫筆’對象，canvas所有的任務都需要它來執行

　　　　var ctx=canvas.getContext(‘2d‘);

　　二、一些canvas常用的屬性

　　　　fillStyle：填充樣式

　　　　strokeStyle：描邊樣式

　　　　lineWidth：描邊寬度

　　　　font：繪製文本所用的字型大小和類型

　　　　textBaseline：文本對其的基準

　　　　shadowOffsetX、shadowOffsetY：陰影位移

　　三、使用canvas繪製圖形

　　　　1、繪製矩形

　　　　ctx.fillRect(x,y,w,h)：填充一個矩形

　　　　ctx.strokeRect(x,y,w,h)：描邊一個矩形

　　　　ctx.clearRect(x,y,w,h)：清除一個矩形範圍內的內容

　　　　2、繪製文本

　　　　ctx.fillText(txt,x,y)填充文本

　　　　ctx.strokeText(txt,x,y)描邊文本

　　　　ctx.measureText(txt)測量

　　　　*要注意的是文本的錨點預設在文本基準(alphabetic)的起始點！

　　　　3、為圖形文字添加陰影

　　　　例：ctx.shadowColor=‘#000‘;//顏色

　　　　　　ctx.shadowOffsetX=8;//水平位移量

　　　　　　ctx.shadowOffsetY=8;//垂直位移量

　　　　　　ctx.shadowBlur=10;//模糊半徑

　　　　4、在繪圖時使用漸層色

　　　　ctx.createLinearGradient(x1,y1,x2,y2)：建立線性漸層對象

　　　　ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：建立放射狀漸層對象

　　　　ctx.addColorStop：添加顏色點

　　　　5、繪製路徑

　　　　ctx.beginPath()：開始路徑

　　　　ctx.closePath()：結束路徑

　　　　ctx.moveTo(x,y)：移動到指定點

　　　　ctx.lineTo(x,y)：繪製直線路徑到指定點

　　　　ctx.arc()：繪製拱形路徑

　　　　ctx.ellipse()：繪製橢圓路徑

　　　　ctx.bezierCurveTo()：繪製貝茲路徑路徑

　　　　ctx.linJoin()：修改折線拐點處樣式

　　　　6、繪製映像

　　　　ctx.drawImage()

　　　　7、對於繪製上下文狀態的改變和修改

　　　　ctx.translate(x,y)：座標軸原點移動到指定點

　　　　ctx.rotate()：旋轉畫筆

　　　　ctx.scale()：畫筆縮放

　　　　ctx.save()：儲存繪圖上下文當前的變形資料

　　　　ctx.restore()：恢複最近一次的儲存的變形相關的狀態

　***Canvas是個純js實現的繪製位元影像的技術。

HTML5 十大新特性(四)——Canvas繪圖