淺析PHP程式員必要瞭解html5繪畫標籤<canvas>

來源:互聯網
上載者:User

標籤:層級   擷取   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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.