skew and animate image on canvas - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

skew and animate image on canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  w w  w.  ja v  a 2s  .  co m
$(function () {
  var
    loaded = false,
    ctx = $('canvas')[0].getContext('2d'),
    img;
  img = $('<img>', {
    src: 'https://www.java2s.com/style/demo/Google-Chrome.png'
  }).on('load', function () {
    loaded = true;
  }).get(0);
  setInterval(function () {
    var f = 0;
    return function () {
      if (loaded) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.save();
        ctx.setTransform (1, f, 0, 1, 0, 0);
        ctx.drawImage(img, 50, 50);
        ctx.restore();
        f += 0.01;
        if (f > 1) {
          f = 0;
        }
      }
    };
  }(), 16);
});
    });

      </script> 
   </head> 
   <body> 
      <canvas width="500" height="500"></canvas>  
   </body>
</html>

Related Tutorials