Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Canvas anima patrĂ³n de imagen</title>
- <script>
- var patron = new Image();
- function animar(){
- patron.src='icono.jpg';
- setInterval(dibujarForma,100);
- }
- function dibujarForma(){
- var lienzo = document.getElementById('lienzo1');
- if(lienzo.getContext){
- var cxt = lienzo.getContext('2d');
- cxt.fillStyle='rgba(255,0,200,.4)';
- cxt.strokeStyle = 'rgba(0,153,255,.4)';
- cxt.save();
- cxt.translate(150,150);
- var time = new Date();
- cxt.rotate( ((2*Math.PI)/6)*time.getSeconds() +
- ( (2*Math.PI)/6000)*time.getMilliseconds());
- cxt.translate(0,28.5);
- cxt.drawImage(patron,-6.5,-3.5);
- cxt.restore();
- }else{
- alert('Necesitas un navegador con soporte a canvas');
- }
- }
- </script>
- </head>
- <body onLoad="animar();">
- <canvas id="lienzo1" width="600" height="600"></canvas>
- </body>
- </html>
Add Comment
Please, Sign In to add comment