html5——canvas畫方塊功能函數


畫布這個標簽着實是個好東西,它靈活的和javascript結合使用可以在頁面上繪制各種動態或者是靜態圖像,減少制作網頁對其它工具的依賴性。

 首先是建立這個畫布,其實和其它標簽一樣<canvas id="canvasIdName" width="" height=""></canvas>,標簽之間可以寫入提示信息。如何在javascript中獲得canvas元素,可以通過var canvas=document.getElementById('canvasIdName').getContext('2d');getContext方法還可以用來檢測瀏覽器是否支持canvas繪圖;畫布是按坐標系來確定位置的,而頁面的左上角是坐標系的原點,向右是x軸正方向,向下是y軸正方向。對於畫方形,實現畫出方形的方法:fillRect(pos-x,pos-y,width,height),當只是引用這個方法的時候便會在頁面指定的位置創建相應大小的方形,在沒有設置圖形樣式時,圖形填充顏色的缺省值是黑色。

當然它還提供了很多有用的效果(這些效果不僅可以在繪制方形是使用,其它圖形也可以使用),這些效果需要在創建圖形之前設置。這些效果的屬性有:

  • strokeStyle:設置圖形的邊線的顏色或樣式
  • fillSty:設置圖形內部填充的顏色或樣式
  • shadowOffsetX/shadowOffsetY:設置圖形陰影的偏移量
  • shadowBlur:設置圖形的模糊度

除了這些屬性之外還有一些方法:

  • creatLinearGradient(x1,y1,x2,y2):創建圖形的線性填充
  • createRadialGradient(x1,y1,x2,y2):創建圖形的放射狀填充(其中(x1,y1),(x2,y2)是漸變的起點和終點。它們可以通過addColorStop(stop,color)方法添加漸變過程中的顏色,其中stop是0.0~1.0之間的值,是漸變過程中的節點;color是從這點開始的顏色。)

繪制方形除了fillRect方法,還有clearRect(pos-x,pos-y,width,heingt)和strokeRect(pos-x,pos-y,width,heingt)。clearRect方法是清空指定方形區域內的所有像素,變為透明狀。strokeRect方法和lineWidth結合使用能繪制出帶邊線的方形。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com