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

    來源:新川教育 閱讀數:3213
    添加時間: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

    贵州11先5开奖结果