<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Liquid Canvas Example</title>
<style type="text/css">
#example { width:30%; margin:200px auto; padding:40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="liquid-canvas.js"></script>
<script type="text/javascript" src="liquid-canvas-plugins.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Liquid Canvas Demo</title>
<style type="text/css">
html, body { margin:0; padding:0; font-size:95%; font-family:sans-serif;
background:#333; color:#ccc; }
.meta a { color:#fff; }
#header { overflow:hidden; padding:20px 1.1%; }
* html #header { height: 1%; }
#header #info { float:left; width:50%; }
#header #title { float:right; width:40%; text-align:right; }
#header #title h1 { margin:0 0 10px 0; }
#header #title p { margin:0; }
#content { padding:20px 0; background:url(background.jpg); overflow:hidden;
color:#000; }
* html #content { height:1%; }
.example { width:27.9%; margin:1% 0 1% 1%; padding:2%; float:left; overflow:hidden; }
* html .example { height:1%; }
.newline { clear:left; }
.example h3 { margin:0 0 10px 0; }
.example pre { width:96%; color:#affe73; overflow:auto; background:#000; padding:5px; }
* html .example pre { overflow:scroll; }
#rounded_content {width:1100px; height:1000px; padding: 30px; margin: 0 auto 0 auto;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="liquid-canvas.js"></script>
<script type="text/javascript" src="liquid-canvas-plugins.js"></script>
<script type="text/javascript">
$.registerLiquidCanvasPlugin({
name: "mandala",
paint: function(area) {
var opts = this.opts;
var ctx = area.ctx;
var min = area.width > area.height ? area.height : area.width;
var trans = min / 2;
var rad = trans / 3;
for (var i = 0; i < 10; ++i) {
area.save();
ctx.translate(area.width / 2, area.height / 2);
ctx.rotate(i * 2*Math.PI / 10);
ctx.translate(trans - rad, 0);
area.width = 30;
area.height = 30;
this.action.paint(area);
area.restore();
}
}
});
$(window).load(function() {
$("#rounded_content").liquidCanvas("[shadow fill{color:green}] => roundedRect");
var i = 0;
$('#content').find(".example").each(function() {
var element = $(this);
element.children("h3").html("Example " + (i++));
var example = element.children("pre").text();
element.liquidCanvas(example);
});
});
</script>
</head>
<body>
<div id="header" class="meta">
<div id="title">
<h1><a href="http://www.ruzee.com/content/liquid-canvas">Liquid Canvas</a></h1>
<p>by Steffen Rusitschka</p>
</div>
<div id="info">
This demonstration doesn't use any images for the container backgrounds.
Each container is layouted via CSS floats and its background is rendered
using the operation shown inside.
<a href="http://www.ruzee.com/content/liquid-canvas">Liquid Canvas</a>
is based on HTML canvas, jQuery, and excanvas.
Tested with FF, IE6(!), Safari, Chrome.
</div>
</div>
<div id = "rounded_content">
<div id="content">
<div id="example0" class="example">
<h3>Example</h3>
Plugins are used to perform drawing operations. Here the
<em>fill</em> plugin gets applied on the <em>rectangle</em> plugin.
This operation is called application.
Gray is the default fill style: a gray rectangle!
<pre>fill => rect</pre>
</div>
<div id="example1" class="example">
<h3>Example</h3>
You can assign properties to plugins. e.g. set a fill color. The
syntax is CSS-like.
<pre>fill{color:#f80} => rect</pre>
</div>
<div id="example2" class="example">
<h3>Example</h3>
A plugin exists for rounded rectangles. Oh, btw.:
<strong>You should really resize your browser window - now! :-)</strong>
<pre>fill{color:#fff} => roundedRect</pre>
</div>
<div class="newline"></div>
<div id="example3" class="example">
<h3>Example</h3>
You can also set the properties of plugins on the right hand side.
More curves!!!
<pre>fill => roundedRect{radius:80}</pre>
</div>
<div id="example4" class="example">
<h3>Example</h3>
Using an array-like syntax you can chain plugins: First draw a
<em>shadow</em>, then <em>fill</em> it. Both plugins in the chain
act on a <em>roundedRect</em>.
<pre>[shadow fill] => roundedRect</pre>
</div>
<div id="example5" class="example">
<h3>Example</h3>
You can chain as mainy plugins as you want. Properties can by set on
any plugin.
<pre>[shadow border{color:#fff} fill{color:#f80}] => roundedRect{radius:30}</pre>
</div>
<div class="newline"></div>
<div id="example6" class="example">
<h3>Example</h3>
Loads of plugins exist, e.g. the <em>gradient</em> plugin -
<strong>and you can write your own!</strong> If you are familiar
with <a href="http://en.wikipedia.org/wiki/Canvas_(HTML_element)">HTML canvas</a> you're ready to go.
<pre>gradient{from:rgba(255, 255, 255, 0.2); to:#888;} => roundedRect{radius:50}</pre>
</div>
<div id="example7" class="example">
<h3>Example</h3>
Applications can be chained as well to perform multiple operations
inside one canvas. Just seperate them with a comma.
<pre>gradient => rect, border => roundedRect{radius:60}</pre>
</div>
<div id="example8" class="example">
<h3>Example</h3>
The application operation can be used recursively by using regular brackets.
This gives a different way of chaining operations.
<pre>fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})</pre>
</div>
</div>
</div>
</body>
</html>
Pastie << self Blog
