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

mobile-game-ch15-small-canvas.htm / htm



  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
  
    <script src='mobile-game-ch15-jquery.min.js'></script>
  </head>
  <body>
    <style> 
      canvas { 
        width: 200px; height: 200px; 
        image-rendering: optimizeSpeed;          
        image-rendering: -moz-crisp-edges;        
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;     
        -ms-interpolation-mode: nearest-neighbor;
      }
    </style>
    <canvas width="2" height="2"></canvas>
    <canvas width="10" height="10"></canvas>
    <canvas width="50" height="50"></canvas>
    <canvas width="10" height="100"></canvas>
  
    <script>
      $("canvas").each(function() {
        var ctx = this.getContext("2d");
        for(var y=0,h=this.height;y<h;y++) {
          for(var x=0,w=this.width;x<w;x++) {
            var r = Math.floor(Math.random()*255),
                g = Math.floor(Math.random()*255),
                b = Math.floor(Math.random()*255);
            ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            ctx.fillRect(x,y,1,1);
          }
        }
      });
    </script>
  </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 04/09/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.