Canvas How to - Create panorama image view

Question

We would like to know how to create panorama image view.

Answer


<!-- w  w  w.j ava 2  s .c o  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var canvas = $("canvas").get(0);
var ctx = canvas.getContext("2d");
var start;
var img = $("<img>").on("load", function() {
    start = Date.now();
    draw();
}).attr("src", "http://lorempixum.com/600/400").get(0);

function draw() {
    var part = (Date.now() - start) / 5 % 600;
    ctx.drawImage(img, part, 0);
    ctx.drawImage(img, part - 600, 0);
    webkitRequestAnimationFrame(draw, canvas);
};
});//]]>  
</script>
</head>
<body>
  <canvas width="400" height="400"></canvas>
</body>
</html>

The code above is rendered as follows: