<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>