git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/gfx/tests/test_gradient.html

   1 <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
   2 <head>
   3 <title>Dojo Unified 2D Graphics</title>
   4 <style type="text/css">
   5         @import "../../../dojo/resources/dojo.css";
   6         @import "../../../dijit/tests/css/dijitTests.css";
   7 </style>
   8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   9 <!--
  10 The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
  11 <script type="text/javascript" src="Silverlight.js"></script>
  12 -->
  13 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
  14 <!--<script type="text/javascript" src="../vml.js"></script>-->
  15 <!--<script type="text/javascript" src="../svg.js"></script>-->
  16 <!--<script type="text/javascript" src="../silverlight.js"></script>-->
  17 <script type="text/javascript">
  18 dojo.require("dojox.gfx");
  19 dojo.require("dojo.colors"); // pull in CSS3 color names
  20
  21 makeShapes = function(){
  22         var SIDE = 10;
  23         var fillObj = {
  24                 colors: [
  25                         { offset: 0,   color: [255, 255, 0, 0] },
  26                         { offset: 0.5, color: "orange" },
  27                         { offset: 1,   color: [255, 255, 0, 0] }
  28                 ]
  29         };
  30         var surface = dojox.gfx.createSurface(dojo.byId("grad"), 300, 300);
  31         // create a background
  32         for(var i = 0; i < 300; i += SIDE){
  33                 for(var j = 0; j < 300; j += SIDE){
  34                         surface.
  35                                 createRect({x: j, y: i, width: 10, height: 10}).
  36                                 setFill((Math.floor(i / SIDE) + Math.floor(j / SIDE)) % 2 ? "lightgrey" : "white");
  37                 }
  38         }
  39         // create a rect
  40         surface.createRect({
  41                 width:  300,
  42                 height: 100
  43         }).setFill(dojo.mixin({
  44                 type: "linear",
  45                 x1: 0, y1: 0,
  46                 x2: 300, y2: 0
  47         }, fillObj));
  48         // create a circle
  49         surface.createEllipse({
  50                 cx: 150,
  51                 cy: 200,
  52                 rx: 100,
  53                 ry: 100
  54         }).setFill(dojo.mixin({
  55                 type: "radial",
  56                 cx: 150,
  57                 cy: 200
  58         }, fillObj));
  59 };
  60 dojo.addOnLoad(makeShapes);
  61 </script>
  62 <style type="text/css">
  63 #grad { width: 300px; height: 300px; }
  64 </style>
  65 </head>
  66 <body>
  67 <h1>dojox.gfx Alpha gradient test</h1>
  68 <div id="grad"></div>
  69 </body>
  70 </html>