[問題] canvas圖片移動 lonelytea PTT批踢踢實業坊

作者: lonelytea (霸氣逼人) 2015-06-13 16:43:59

http://i.imgur.com/RBN8tvR.jpg
程式如上
畫一張圖片
我想要讓他隨時間往上或下移動
想請問哪裏錯了不會動
要如何修改

作者: jacksonxu (K3R) 2015-06-13 17:31:00

你可以貼到Codepen...

作者: pm2001 (做個盾牌眼球兵吧) 2015-06-13 17:38:00

畫上去就不能改了移動效果其實是你把canvas清掉重畫一遍

作者: LaPass (LaPass) 2015-06-13 20:46:00

任何繪圖都是這樣，給妳一塊buffer，讓你在上面畫圖。影像卡再把那塊buffer打在螢幕上像是xbox、或是其他3d繪圖之類的都是這樣。網頁上的canvas只是把比較底層的方法放上來而已。

作者: s540421 (虫它虫它) 2015-06-13 21:54:00

同上，你要做的是改變drawImage時下筆的座標，而不是對Image物件調整xy屬性每次呼叫callback時先清除buffer，再重新把圖片畫到正確的座標上

作者: NOXI (EZway) 2015-06-15 11:46:00

setInterval(() => { ctx.drawImage(img,x++,y++)})最好用requestAnimationFrame

作者: mmis1000 (秋月戀楓) 2015-06-15 12:27:00

rAF使用時絕對不能做 x++之類方式更新畫面要用時間軸算不然在每個設備上速度都不一樣，會很悲劇

繼續閱讀