标签:
今天一直在找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> </html>
图片是运行的效果。
标签:
原文地址:http://www.cnblogs.com/guxingzhe/p/4813509.html