Ads Inside Post

Search in This Blog

Zoom in out in html5 Canvas


This is the part of HTML5 Animation. if you want to ZOOM IN and ZOOM OUT in some intervals continuously. then you can use HTML5 canvas. Listed below the code that will ZOOM IN and ZOOM OUT to any image which you want.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-2.1.1.js"></script>
</head>
<body onLoad="drawCanvas();">
    <div>
        <canvas id="myCanvas" width="634" height="378">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    </div>
</body>
<script>
var surface; var happy; var x = 50; var y = 50; var scale = 0; var scaleDirection = 0.2;
function drawCanvas() {
    surface = document.getElementById("myCanvas");
    if (surface.getContext) {
        happy = new Image();
        happy.onload = loadingComplete;
        happy.src = "Voayger_voyageofdiscovery.jpg";
    }
}
function loadingComplete(e) {
    setInterval(loop, 125);
}
function loop() {
    var surfaceContext = surface.getContext('2d');
    surfaceContext.fillStyle = "rgb(255,255,255)";
    surfaceContext.fillRect(0, 0, surface.width, surface.height);
    // Save the current context
    surfaceContext.save();
    // Translate to the center point of our image
    surfaceContext.translate(x + happy.width * 0.5, y + happy.height * 0.5);
    // Perform the scale
    surfaceContext.scale(scale, scale);
    // Translate back to the top left of our image
    surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);
    // Finally we draw the image
    surfaceContext.drawImage(happy, 0, 0);
    // And restore the context ready for the next loop
    surfaceContext.restore();
    // Animate our scale value
    scale += scaleDirection;
    if (scale < 0.2 || scale > 2) {
        scaleDirection = -scaleDirection;
    }
}
</script>
</body>
</html>