標籤:層級 擷取 blur 操作 開始 參數 fill timeout 標籤
目前HTML5還在大行其道,伴隨產生了很多新的代碼辦法。
其中一個便是基於HTML5的遊戲,例如推廣中用到的小遊戲------神經貓
或可以單獨下載啟動並執行萌寵消除類型遊戲
這樣的小遊戲大多數都是通過一個html5的新增<canvas>標籤實現的,這個標籤有一套自己的編程介面(canvas API),專門用來繪製圖形,可以實現一系列漂亮的圖形與映像,建立出更好更豐富的新一代web頁面,canvas標籤通過JavaScript語言的畫布,以及指令碼來進行映像的繪製。
接下來我們來瞭解canvas標籤的具體使用,首先我們在繪製映像之前必須要有一個畫布
一、建立畫布
<canvas id="canvas1" width="320" height="160"> 您的瀏覽器不支援canvas標籤 </canvas>
然後在頁面的JavaScript指令碼中擷取到該元素
var canvas1 = document.getElementById(‘canvas1‘);
然後便可在JavaScript指令碼中對該canvas標籤進行繪畫操作
Canvas有如下的常用屬性
canvas1.getAttribute("height")
canvas1.getAttribute(“width")
分別擷取當前的畫布的寬和高
fillStyle 設定或返回用於填充繪畫的顏色、漸層或模式
strokeStyle 設定或返回用於筆觸的顏色、漸層或模式
shadowColor 設定或返回用於陰影的顏色
shadowBlur 設定或返回用於陰影的模糊層級
shadowOffsetX 設定或返回陰影距形狀的水平距離
shadowOffsetY 設定或返回陰影距形狀的垂直距離
當然繪畫需要畫筆
二、擷取畫筆操作
我們就需要得到屬於這個畫布的畫筆context,以後的所有事情都通過這個畫筆來完成
var canvas1 = document.getElementById(‘canvas1‘);var ctx1 = canvas1.getContext(‘2d‘);
然後使用context提供的drawImage()方法來在畫布上繪製映像、畫布或視頻
//在畫布上定位元影像像:context.drawImage(img,x,y);//在畫布上定位元影像像,並規定映像的寬度和高度:context.drawImage(img,x,y,width,height);//剪下映像,並在畫布上定位被剪下的部分:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數 描述
img 規定要使用的映像、畫布或視頻。
sx 可選。開始剪下的 x 座標位置。
sy 可選。開始剪下的 y 座標位置。
swidth 可選。被剪下映像的寬度。
sheight 可選。被剪下映像的高度。
x 在畫布上放置映像的 x 座標位置。
y 在畫布上放置映像的 y 座標位置。
width 可選。要使用的映像的寬度。(伸展或縮小映像)
height 可選。要使用的映像的高度。(伸展或縮小映像)
接下來我們來繪製一張運動的圖片在canvas畫布上
var b_y=0;//下面那張圖的縱座標一開始為0正好在畫布上顯示//然後越來越大就向下移動了//上面那張圖一開始的縱座標是負的,所以沒顯示//比如畫布高568,寬320//上面圖的座標已開是就是負的568 b_y-568//b_y越來越大,b_y-568就越來越接近0上面的圖就越來越下來了function drawBackground(){ ctx1.drawImage(image,0,b_y,320,568); ctx1.drawImage(image,0,b_y-568,320,568); b_y+=4; if(b_y>568){ b_y=0; } window.setTimeout("drawBackground()",100);}
淺析PHP程式員必要瞭解html5繪畫標籤<canvas>