<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js" type="text/javascript"></script>
<style media="screen">
body {
background: #333;
color: #fff;
font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
position: absolute;
top: 50%;
width: 640px;
}
#copy {
bottom: 0;
font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
position: absolute;
right: 1em;
text-align: right;
}
#copy a {
color: #fff;
}
body {margin: 0;padding: 0;text-align: center;}
h1 {font-weight: 400;height: 5%;}
#canvas {height: 400px;margin: 0 auto;text-align: left;width: 640px;}
#code {font-family: Consolas, Monaco, "Lucida Console", monospace;height: 4em;margin: 10px;padding: 0;width: 90%;}
#run {font-size: 2em;}
</style>
<script type="text/javascript">
<?php
include_once("../d3.classes.inc.php"); // download the required d3 package
include_once("../raphael.class.inc.php");
func()
->add( raphael(array( raphael::escape("canvas"), 640, 400))->createVar("paper")->registerStack() )
->add( document()->getElementById("run")->createVar("btn",false)->registerStack() )
->add( document()->getElementById("code")->createVar("cd",false)->registerStack() )
->add( func()
->add( stack()->get("paper")->get()
->clear()->colon()
)
->add( stack()->get("paper")->get()
->rect(0, 0, 640, 400, 10)
->attr(obj(array("fill" => "#fff", "stroke" => "none")))
->colon()
)->add(
raphael()->trycatch(
raphael(
f( array(
raphael::escape("paper"),
raphael::escape("window"),
raphael::escape("document"),
stack()->get("cd")->get()->value(document::property)
)
)
->createVar(null, true)->enclose())
->call(
raphael::unescape("paper"),
raphael::unescape("paper")
),
console()->log(raphael::unescape("e.message"))
)
)
->createVar( stack()->get("btn")->get()->onclick(document::property) )
->autoexec()
)
->createVar(window()->onload(window::property))->toStack();
echo stack()->getInstance();
?>
</script>
</head>
<body>
<div id="canvas"></div>
<div><textarea id="code">paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);</textarea></div>
<div><button id="run" type="button">Run</button></div>
</body>
</html>
|
Download
