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

graphic-javascript-vector-playground.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Raphaël Playground</title>
      <script src="graphic-javascript-vector-raphael.js" type="text/javascript" charset="utf-8"></script>
      <style type="text/css" media="screen">
          body {
              margin: 0;
              padding: 0;
              background: #000;
              color: #fff;
              font: 100.1% "Lucida Grande", Lucida, Verdana, sans-serif;
              text-align: center;
          }
          h1 {
              height: 5%;
          }
          #canvas {
              height: 480px;
              width: 640px;
              margin: 0 auto;
              background: #fff;
              text-align: left;
          }
          #code {
              width: 90%;
              height: 4em;
              margin: 10px;
              padding: 0;
              font-family: Consolas, Monaco, "Lucida Console", monospace;
          }
          #run {
              font-size: 2em;
          }
      </style>
      <script type="text/javascript" charset="utf-8">
          window.onload = function () {
              var paper = Raphael("canvas", 640, 480);
              var btn = document.getElementById("run");
              var cd = document.getElementById("code");
  
              (btn.onclick = function () {
                  paper.clear();
                  try {
                      (new Function("paper", "window", "document", cd.value)).call(paper, paper);
                  } catch (e) {
                      alert(e.message || e);
                  }
              })();
          };
      </script>
  </head>
  <body>
      <h1>Raphaël Playground</h1>
      <div id="canvas"></div>
      <div><textarea id="code">paper.circle(320, 240, 60).attr({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5});</textarea></div>
      <div><button id="run" type="button">Run</button></div>
  </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/2/2008

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.