<div id="a"></div> <script type="text/javascript"> (function() { var canvas = document.createElement(‘canvas‘), a = document.getElementById(‘a‘); canvas.id = ‘c‘; canvas.width = 1024; canvas.height = 500; a.appendChild(canvas); var c = document.getElementById(‘c‘), ctx = canvas.getContext(‘2d‘), img = new Image(), offset = 0, fps = 60, speed = 80 / fps; img.src = "http://images2015.cnblogs.com/blog/428166/201606/428166-20160601185822492-784719690.jpg"; function draw(ctx) { ctx.save(); offset = offset < c.width ? (offset + speed) : (offset - c.width); ctx.translate(-offset, 0); ctx.drawImage(img, 0, 0); ctx.drawImage(img,img.width,0); ctx.restore(); } window.onload = function() { (function() { ctx.clearRect(0, 0, c.width, c.height); draw(ctx); requestAnimationFrame(arguments.callee, c); })(); }; })(); </script>
受了点启发,微信开放域的排行榜滚动,不想用原生的。准备简单实现。
原文:https://www.cnblogs.com/honghong87/p/11284481.html