鐵人檔案
將昨天畫好的圖儲存下來吧～ 會臨時插入這個，是因為我的強人前同事給我得靈感，絕對不是因為要多撐一天版面原本只是單純想做圖片儲存，後來想想順便做下載，再想想那多做...
基礎動畫 終於到了我們的重頭戲，前面講了這麼多天基本介紹，今天終於進入重點動畫的部分！鼓掌！！！ 產生畫面 產生畫面需要以下幾個步驟：【step 1】 清除畫布...
彈跳球 回想多年以前的鐵人賽，我好像也做過彈跳球的動畫CSS彈跳球，而今天做的跟之前的差別在哪呢？就是今天的能用程式控制動畫，包含觸發的時間跟球速等等。所以今天...
繞橢圓 前幾天的繞圈圈一直想著能不能繞橢圓轉，查了一些網路上大大的寫法，試寫了一次 離高中已經很久遠的我，早就已經忘了橢圓公式，只好求助弟弟，讓他幫我複習一下，...
像素控制 前面幾天都沒有真正的瞭解canvas裡的像素，今天就來好好探討一下吧～使用ImageData物件，可直接對canvas裡的像素陣列資料讀(read)和...
放大鏡 昨天使用到了getImageData()去拿取畫布裡的顏色資料，而前幾天在【Day07】Canvas-繪製影像那天有講到drawImage(image,...
優化 canvas廣泛運用在網頁的2D繪圖、動畫、遊戲上，但效能自始至終是一個重要的問題，以下有幾點注意事項，可以提升canvas的效能: 利用視窗外的畫布...
結論 補充 因為canvas基本上原生只有支援一種圖形繪製就是矩形，其他圖形都是要用路徑繪製，相對來說比較難，因此常會搭配SVG向量圖形來使用。 前面都介紹2...
PixiJS? pixi是一款輕量、快速的2D圖形渲染引擎，不需深入探討WebGL api，即可利用WebGL加速並可以在不支援WebGL的情況下轉換為canv...
創建畫布 昨天已經將pixi引入了，今天就把pixi建立起來吧！ View 首先就需用到pixi.application方法創建畫布(也就是view)，而創建之...
