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-example-graphic-canvas.htm / htm



  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
  <title>Canvas</title>
  <script>

create canvas


  window.onload = function(){
          var elem = document.createElement("canvas");
          elem.width = 500;
          elem.height = 500;
          document.body.appendChild( elem );

get context


          var context = elem.getContext("2d");
          
          context.fillRect(0, 0, elem.width, elem.height);
          
          var pos = 0, dir = 1;

time-based animation(s)


          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);
  };

empty body


  </script>
  </head><body>
  <!--
  <canvas height="500" width="500"></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 20/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.