[ 試試 ] 某天突然想到,我也可以利用之前作過的 繪文字填圖EmojiPaint 的演算法,作一個簡單的像素風動畫,然後可以存成GIF或者影片方便分享。 EmojiPaint裡面己經有一個叫作pixelart的函式,可以把一個己經畫好圖的canvas的內容,轉成像素風格。每一個像素根據指定tile大小(cw*ch),它的顏色就是這塊tile裡所有pixel的顏色平均值。這就是pixelart的原理,最簡單的作法。 現在,要作成動畫,只要從最大的tile開始,也就是整張圖的大小(縮放調整至400*400),不斷的呼叫pixelart。作完後再把tile縮小一半,也就是200*200,再作一次pixelart。一直持續這個過程,直到tile為1*1之前停止,因為1*1太多點要畫了。 經過修改的pixelart,會先把此次所有tile都計算好顏色和位置,儲存在一個陣列。接著才是畫圖階段,一個一個把tile畫出來。但是tile愈小的時候,數量就愈多,畫一個tile的時間也要跟著縮短,才不會讓人覺得過程太過冗長。其實,除了隨著tile縮小,畫tile的時間跟著縮短之外。每一個draw處理中畫的tile數量也會跟著增加,這都是為了減少動畫過程太冗長,提高觀看的人的體驗。 底下是關鍵的pixelart和drawblock函式。 function pixelart ( id, cw, ch ) { var imgData = ctx.getImageData( 0 , 0 , canvas.width, canvas.height); var col = Math .floor(canvas.width / cw); var row = Math .floor(canvas.height / ch); var blocks = []; for ( var i = 0 ; i < col; i++) { for ( var j = 0 ; j < row; j++) { var x = cw * i; var y = ch * j; var rgb = calcRgbSum(imgData.data, x, y, cw, ch); blocks.push([x...