1. <track id="hvdsq"></track>

      網上教學
      網絡營銷培訓專家:新川教育
         著名網絡營銷培訓、淘寶電商培訓機構.
      實力機構,系統實戰!免費試聽.
      網絡營銷,淘寶培訓課程優惠
      如何使用Canvas創建動畫《HTML5系列教程24》

      來源:新川教育 閱讀數:3282
      添加時間: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. 營銷就業班
      4. 資料下載
      5. 學員作品
      6. 學校圖片
      7. 聯系方式
      8. site map

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

      粵公網安備 44011302001949號
      云南11选5