網上教學
網絡營銷培訓專家新川教育
   著名實戰網絡營銷課程培訓機構.
全日制暑期班火熱招生中!
網絡營銷,淘寶培訓課程優惠
如何使用Canvas創建動畫《HTML5系列教程24》

來源:新川教育 閱讀數:4467
添加時間:2017-5-13   類別:網頁設計教程

如何使用Canvas創建動畫《HTML5系列教程24》

    動畫是由一幀一幀的圖像組合而成的,這些相信學過Flash的朋友都知道的,那么如何使用Canvas創建動畫呢,那就需要在Canvas中間隔一定時間繪制多幅連續運動的圖像,這樣就能夠實現動畫效果了。


1.清除Canvas的內容

    既然能夠在Canvas中繪制圖形,那么是否也能夠在Canvas中清除內容呢?答案是肯定的。Canvas中提供了clearRect(x,y,width,height)函數用于清除圖像中指定矩形區域的內容。清除指定矩形Canvas的內容的代碼如圖:

在HTML5中清除Canvas的內容代碼示例

    在谷歌瀏覽器中預覽的效果如圖

在HTML5中清除Canvas的內容效果預覽示例

2.創建動畫

    現在讓我們來動手練習如何創建一個簡單的動畫。創建步驟如下所示:

  1. 指定坐標點(100,100)為圓心,繪制半徑為0的圓。
  2. 間隔10毫秒后,清除之前繪制的圖形。
  3. 再次以坐標點(100,100)為圓心,繪制半徑為1的圓,依此類推,知道圓的半徑等于100.
  4. 繼續以坐標點(100,100)為圓心,繪制半徑為99的圓,依此類推,直到圓的半徑等于0.
  5. 然后再增加圓的半徑,這樣讓動畫往返運動。

    創建動畫的代碼如圖

在HTML5中使用Canvas創建動畫的代碼

    在谷歌瀏覽器中預覽的效果如圖

在HTML5中使用Canvas創建動畫在瀏覽器中的預覽效果

3.動畫的開始于停止

    現在我們在HTML中添加兩個按鈕,分別用于控制動畫的開始于停止,添加的代碼如下所示。

<button onclick="tt=setInterval(action,10);">開始</button>>
<button onclick="clearInterval(tt);">停止</button>

    這里的setinterval用于控制時間間隔,我們設置影響的函數為action函數,設置時間間隔為10毫秒,并用變量tt接收返回的值。停止按鈕上調用clearInterval函數,取消由setinterval設置的時間間隔。這里要注意的是,因為現在我們通過按鈕來控制動畫的開始與停止,所以就必須刪除上圖代碼中的:
onload=setinterval(action,10);

    下圖是添加了開始和停止按鈕后在谷歌瀏覽器的中的效果

在谷歌瀏覽器中預覽添加了按鈕的效果

    這便是在HTML5中如何使用Canvas創建動畫的方法了,大家可以都去試一下,可以自己去試著增加一些步驟,看能不能繪制出更多的效果。了解更多精彩資訊請添加我們的官方微信:pyyuanxing!謝謝大家的觀看。祝大家:身體健康、生活愉快!

      友情鏈接

  1. 辦公文秘
  2. 美術培訓
  3. SEM培訓
  4. UI設計
  5. PS圖片處理
  6. 營銷就業班
  7. 跨境電商
  8. 微信營銷
  1. 開班信息
  2. 教學優勢
  3. 師資介紹
  4. 資料下載
  5. 工作推薦
  6. 學員作品
  7. 學校圖片
  8. site map

地址: 廣州市番禺區市橋街橋東路63號銀座中心7樓全層(番禺中醫院旁邊,百德中心斜對面)   
電話: 020-84829690   咨詢QQ:522961923  點擊這里給我發消息 
咨詢微信:18926224142     微信公眾號:新川教育
Copyright 2005-2020廣州新川教育 All rights reserved.粵ICP備11014454號-6

粵公網安備 44011302001949號
七星彩走势图新浪