topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-graphic-canvas-canvas.htm / htm



  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
  <title>Canvas</title>
  <script>
  window.onload = function(){
          
          var elem = document.getElementById("canvas"); 
          var context = elem.getContext("2d");
          
          context.fillRect(0, 0, elem.width, elem.height);
          
          var pos = 0, dir = 1;
          
          setInterval(function(){
                  context.rotate( 15 );
                  
                  context.fillStyle = "rgba(0,0,0,0.05)";
                  context.fillRect(0, 0, elem.width, elem.height);
                  
                  context.fillStyle = "rgba(255, 0, 0, 1)";
                  context.fillRect(pos, pos, 20, 20);
                  
                  pos += dir;
                  
                  if ( pos > elem.width ) {
                          dir = -1;
                  } else if ( pos + 20 < 0 ) {
                          dir = 1;
                  }
          }, 10);
  };
  </script>
  </head>
  <body>
  <div>
  <canvas id="canvas" height="500" width="500"></canvas>
  </div>
  with plain canvas
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 27/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.