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-gradients.htm / htm



  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
  
  </head>
    <script src='mobile-game-ch15-jquery.min.js'></script>
    <style> canvas { background-color:black; } </style>
  
    <canvas id="mycanvas", width="600" height="400"></canvas>
  
    <script>
      var canvas = $("#mycanvas")[0],
          ctx = canvas.getContext("2d"),
          width = canvas.width,
          height = canvas.height;
  
      var linearGradient = ctx.createLinearGradient(0,0,100,300),
          radialGradient = ctx.createRadialGradient(300,200,0,
                                                    300,300,200);
  
      linearGradient.addColorStop(0,"#000");
      linearGradient.addColorStop(0.5,"#FFF");
      linearGradient.addColorStop(1,"#000");
  
      radialGradient.addColorStop(0,"#000");
      radialGradient.addColorStop(0.5,"#FFF");
      radialGradient.addColorStop(1,"#000");
  
      ctx.fillStyle = linearGradient;
      ctx.fillRect(0,0,200,400);
  
      ctx.fillStyle = radialGradient;
      ctx.fillRect(200,0,200,400);
  
      var patternCanvas = $("<canvas width='20' height='20'>")[0],
          patternCtx = patternCanvas.getContext("2d")
  
      patternCtx.fillStyle = "#777";
      patternCtx.fillRect(0,0,10,10);
      patternCtx.fillStyle = "#FFF";
      patternCtx.fillRect(10,10,10,10);
  
      ctx.fillStyle = ctx.createPattern(patternCanvas,"repeat");
      ctx.fillRect(400,0,200,400);
    </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.