首頁 > web前端 > H5教程 > HTML5程式設計實戰之二-使用動畫的形式切換圖片程式碼案例

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

黄舟
發布: 2017-03-30 13:30:21
原創
1805 人瀏覽過

本文主要用到的知識

  本文主要用到了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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板