[问题] 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++之类方式更新画面要用时间轴算不然在每个设备上速度都不一样，会很悲剧

继续阅读