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-to-data-url.htm / htm



  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
  
  </head>
    <script src='mobile-game-ch15-jquery.min.js'></script>
    <canvas id="mycanvas", width="400" height="400"></canvas>
    <div id='snapshots'></div>
  
    <script>
      var canvas = $("#mycanvas")[0],
          ctx = canvas.getContext("2d");
  
      function randInt(max) {
        return Math.floor(Math.random() * max);
      }
  
      function drawRandomRectangle() {
        var r = randInt(255), g = randInt(255), b = randInt(255),
            s = randInt(100), x = randInt(400), y = randInt(400);
  
        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(x,y,s,s);
      }
  
      setInterval(drawRandomRectangle,50);
  
      canvas.on("click touchstart",function(e) {
        var url = canvas.toDataURL("image/png");
  
        $("<img>").attr({ src: url, width: 100, height: 100 }).prependTo("#snapshots");
        e.preventDefault();
      });
  
    </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.