[問題] canvas圖片移動

[lonelytea (霸氣逼人)]

http://i.imgur.com/RBN8tvR.jpg

程式如上
畫一張圖片
我想要讓他隨時間往上或下移動
想請問哪裏錯了 不會動
要如何修改

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.83.169.101
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1434185042.A.DE1.html
→ jacksonxu: 你可以貼到Codepen...
推 pm2001: 畫上去就不能改了 移動效果其實是你把canvas清掉重畫一遍
推 LaPass: 任何繪圖都是這樣，給妳一塊buffer，讓你在上面畫圖。
→ LaPass: 影像卡再把那塊buffer打在螢幕上
→ LaPass: 像是xbox、或是其他3d繪圖之類的都是這樣。網頁上的canvas
→ LaPass: 只是把比較底層的方法放上來而已。
→ s540421: 同上，你要做的是改變drawImage時下筆的座標，而不是對
→ s540421: Image物件調整xy屬性
→ s540421: 每次呼叫callback時先清除buffer，再重新把圖片畫到正確
→ s540421: 的座標上
推 NOXI: setInterval(() => { ctx.drawImage(img,x++,y++)})
→ NOXI: 最好用requestAnimationFrame
→ mmis1000: rAF使用時絕對不能做 x++之類方式更新畫面 要用時間軸算
→ mmis1000: 不然在每個設備上速度都不一樣，會很悲劇