2013年9月14日 星期六

[分享]使用canvas做簡單線條動畫

在HTML5中,使用canvas,搭配JavaScript的setInterval方法,就可以做出一些簡單的動畫出來,下列就是一個超陽春的例子:


首先在html檔案中,加入一個canvas元素:

然後再加入下列JavaScript程式:


其實動畫就是把一張張動作相進的畫布,加上時間軸的概念後接續起來,上列程式針對同一畫布清除後,再畫下一幕動作,這個過程由程式來執行的話,轉換是非常快的,所以使用者看起來就像是接續的一樣,只要能熟悉Canvas相關的API,要做出一些簡單但有創意的動作,應該不是難事。

沒有留言: