作者lonelytea (霸氣逼人)
看板Web_Design
標題[問題] canvas圖片移動
時間Sat Jun 13 16:43:59 2015
http://i.imgur.com/RBN8tvR.jpg
程式如上
畫一張圖片
我想要讓他隨時間往上或下移動
想請問哪裏錯了 不會動
要如何修改
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.83.169.101
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1434185042.A.DE1.html
1F：→ jacksonxu: 你可以貼到Codepen... 06/13 17:31
2F：推 pm2001: 畫上去就不能改了 移動效果其實是你把canvas清掉重畫一遍 06/13 17:38
3F：推 LaPass: 任何繪圖都是這樣，給妳一塊buffer，讓你在上面畫圖。 06/13 20:46
4F：→ LaPass: 影像卡再把那塊buffer打在螢幕上 06/13 20:47
5F：→ LaPass: 像是xbox、或是其他3d繪圖之類的都是這樣。網頁上的canvas 06/13 20:49
6F：→ LaPass: 只是把比較底層的方法放上來而已。 06/13 20:50
7F：→ s540421: 同上，你要做的是改變drawImage時下筆的座標，而不是對 06/13 21:54
8F：→ s540421: Image物件調整xy屬性 06/13 21:54
9F：→ s540421: 每次呼叫callback時先清除buffer，再重新把圖片畫到正確 06/13 21:55
10F：→ s540421: 的座標上 06/13 21:55
11F：推 NOXI: setInterval(() => { ctx.drawImage(img,x++,y++)}) 06/15 11:46
12F：→ NOXI: 最好用requestAnimationFrame 06/15 11:47
13F：→ mmis1000: rAF使用時絕對不能做 x++之類方式更新畫面 要用時間軸算 06/15 12:27
14F：→ mmis1000: 不然在每個設備上速度都不一樣，會很悲劇 06/15 12:28