Geek Answers Handbook

HTML5 large canvas - moving and scaling all content, including background

My goal is to implement an application, for example http://www.crystal.ch/abb/power_systems_landscape/ using html5.

As you can see, we may need a large (2000 * 600) canvas, but I'm not sure.

Can someone give me an idea just to track the behavior of the above link?

  • the contents of the entire canvas, including the background, can be moved left-right using mousemove and mousedown.
  • the contents of the entire canvas, including the background, moves left and right smoothly in accordance with the choice of the power system
  • Zoom
  • The effect of fading, as plus iconic circles.

Any idea would be appreciated.

+5
source share
2

-

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
    <canvas id='canvas' width='2000' height='600'></canvas>
<div>

, , -

document.getElementById('wrapper').scrollTo(x, y);


document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;

setInterval, , , .

+3

, 2D- js, canvas html, draw. - ( , - ). 13000 , /.

2 , , .

> 3000 ( iOS ~ > 3000 - ).

0

More articles:


All Articles