Html5 Canvas 实现滚动的图片
admin今天一直在找html5 canvas的使用实例。想画一张地图，再画个小车在上面跑。运气好找到了一个大神写的js代码。该代码实现了图片的左右来回滚动，现在粘贴在博客里记录一下：
<html><head><meta charset="utf-8" /><title>LScroll5.html</title><script type="text/javascript"> var LScroll = { img : null, sc : null, scx : null, at : 0, flag : true, loadImg : function(srcs, callback) { var mg = new Image(); mg.src = srcs; mg.onload = function() { callback(this); }; // callback function return LScroll.img = mg; }, init : function(srcs) { if (!document.body) document.createElement('body'); if (!LScroll.sc) { var sc = document.createElement('canvas'); LScroll.scx = sc.getContext('2d'); var callback = function(imgs) { // after onload image can be draw sc.width = imgs.width / 4; sc.height = imgs.height; //not style. sc.style.backgroundColor = 'black'; sc.style.border = 'solid 1px white'; document.body.style.backgroundColor = 'black'; document.body.style.textAlign = 'center'; document.body.appendChild(LScroll.sc = sc); LScroll.draw(LScroll.sc, LScroll.scx); }; LScroll.loadImg(srcs, callback); } }, draw : function(sc, scx) { scx.clearRect(0, 0, sc.width, sc.height); scx.save(); scx.beginPath(); switch (LScroll.flag) { case true: if (-LScroll.at == LScroll.img.width - sc.width) LScroll.flag = !LScroll.flag; LScroll.at--; break; case false: if (LScroll.at == 0) LScroll.flag = !LScroll.flag; LScroll.at++; } scx.drawImage(LScroll.img, LScroll.at, 0); scx.restore(); setTimeout(function() { LScroll.draw(sc, scx); }, 10); } }; window.onload = function() { LScroll.init('road-map.png'); };</script></head><body></body>本文由 我爱PHP169 作者：admin 发表，其版权均为 我爱PHP169 所有，文章内容系作者个人观点，不代表 我爱PHP169 对观点赞同或支持。如需转载，请注明文章来源。
