HTML5程式設計實戰之二-使用動畫的形式切換圖片程式碼案例

本文主要用到的知識

　　本文主要用到了Canvas API中的drawImage方法，下面對此方法略做介紹。 ，定義如下：

context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

　　第一個方法有三個參數，第一個參數為要繪製的圖像(還可以是video元素)，x和y為該圖像在畫布中的起始座標。 　　第二個方法有五個參數，前三個跟第一個方法意義一樣，w和h指繪製時的圖像寬度和高度，可以用來進行圖像縮放。 #　　第三個方法有九個參數，第一個參數跟前二個方法意義相同，後八個參數中前四個在源圖像上一取一個矩形，後四個參數用於在畫布上定義一個矩形，整個方法的作用就是把來源影像上部分區域(第二到五個參數定義的部分)複製到畫布上(後四個參數定義的部分)。方法完成繪製。八個參數從0逐漸增加到圖片的寬度

　　drawtopToBottom()：效果為從上向下顯示，主要把第五個參數和第九個參數從0逐漸增加到圖片的高度

　　drawhcenter()：效果為從中間水平向兩邊顯示，主要把第二、六個參數從圖像寬度的一半減小到0，第四、八個參數從0增加到圖像寬度

　　drawvcenter()：效果為從中間向上下兩邊顯示，跟上一個類似

　　drawhwindow()：效果為水平方向百葉窗，跟drawhcenter方法原理類似，只是這裡是從多個地方進行的

　　drawvwindow()：效果為垂直方面百葉窗，跟drawvcenter方法原理類似，只是這裡是從多個地方進行的

　　drawhvwindow()：效果為百葉窗，是drawhwindow()跟drawvwindow()的組合

　　歡迎大家補充和完善。本

地圖

片，效果更佳。

以上是HTML5程式設計實戰之二-使用動畫的形式切換圖片程式碼案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！