Guest User

Untitled

a guest
Sep 25th, 2018
95
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 0.91 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Canvas anima patrĂ³n de imagen</title>
  6. <script>
  7.     var patron = new Image();
  8.    
  9.     function animar(){
  10.         patron.src='icono.jpg';
  11.         setInterval(dibujarForma,100);
  12.         }
  13.        
  14.     function dibujarForma(){
  15.         var lienzo = document.getElementById('lienzo1');
  16.         if(lienzo.getContext){
  17.             var cxt = lienzo.getContext('2d');
  18.             cxt.fillStyle='rgba(255,0,200,.4)';
  19.             cxt.strokeStyle = 'rgba(0,153,255,.4)';
  20.             cxt.save();
  21.             cxt.translate(150,150);
  22.            
  23.             var time = new Date();
  24.             cxt.rotate( ((2*Math.PI)/6)*time.getSeconds() +
  25.                      ( (2*Math.PI)/6000)*time.getMilliseconds());
  26.             cxt.translate(0,28.5);
  27.             cxt.drawImage(patron,-6.5,-3.5);
  28.             cxt.restore();
  29.             }else{
  30.                 alert('Necesitas un navegador con soporte a canvas');
  31.                 }
  32.         }
  33. </script>
  34. </head>
  35.  
  36. <body onLoad="animar();">
  37.     <canvas id="lienzo1" width="600" height="600"></canvas>
  38. </body>
  39. </html>
Add Comment
Please, Sign In to add comment