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

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


首先在html檔案中，加入一個canvas元素：

然後再加入下列JavaScript程式：

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