作者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/cn.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