Posted By

CesarChavezNava on 09/26/13


Tagged

canvas


Versions (?)

Canvas Cubo Movimiento


 / Published in: JavaScript
 

Animación básica con canvas, un cuadrado que se mueve hacia la parte inferior y cambia de color cada cierto punto del plano.

  1. var x = 0; y = 0, width = 150, height = 75;
  2. function Initialize()
  3. {
  4. time = setInterval(function(){
  5. x++; y++; width++; height++;
  6. MovRect(x,y,width,height);
  7. },10);
  8. }
  9.  
  10. function MovRect(x,y,width,height)
  11. {
  12. var canvas = document.getElementById("CanvasId");
  13. var ctx = canvas.getContext("2d");
  14. if ( x > 0 && x < 50 )
  15. {
  16. ctx.fillStyle = "#FE2E2E";
  17. }
  18. if ( x > 50 && x < 100)
  19. {
  20. ctx.fillStyle = "#600";
  21. }
  22. else if ( x > 100 && x < 150)
  23. {
  24. ctx.fillStyle = "#2E9AFE";
  25. }
  26. else if ( x > 150 && x < 200)
  27. {
  28. ctx.fillStyle = "#FFFF00";
  29. }
  30. else if ( x > 200 && x < 250)
  31. {
  32. ctx.fillStyle = "#3ADF00";
  33. }
  34. else if ( x > 250 && x < 300)
  35. {
  36. ctx.fillStyle = "#B45F04";
  37. }
  38. else
  39. {
  40. ctx.fillStyle = "#000";
  41. }
  42. ctx.fillRect(x,y,width,height);
  43. ctx.fillStyle = "#000";
  44. ctx.moveTo( x-1, y-1);
  45. ctx.lineTo(x,y);
  46. ctx.stroke();
  47. }

Report this snippet  

You need to login to post a comment.