[問題] canvas圖片移動

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