Liquid Canvas | 設置サンプル
実行結果
基本的な例
Liquid Canvasの基本的な例です。
プラグインを使用したサンプルいろいろ
Example
プラグインは、描画操作に使用されます。このfillプラグインは、rectangleプラグイン上で適用されます。この操作は、アプリケーションによって呼び出されます。Grayは、デフォルトのfillスタイルです。
fill => rect
Example
プラグインにプロパティを指定することができます。シンタックスはCSSのようなものです。
fill{color:#f80} => rect
Example
プラグインは丸くて長方形のために存在しています。
fill{color:#fff} => roundedRect
Example
プラグインのプロパティは、右側に指定することもできます。角のカーブを大きくしたい場合は、下記のようにします。
fill => roundedRect{radius:80}
Example
配列のようなシンタックスを使用するとプラグインを連結できます。「shadow」と「fill」両方のプラグインをroundedRect上で連結します。
[shadow fill] => roundedRect
Example
複数のプラグインを連結できます。それぞれのプラグインにプロパティを設定できます。
[shadow border{color:#fff} fill{color:#f80}] => roundedRect{radius:30}
Example
たくさんのプラグインが存在します。「gradient」プラグインは、好きなように描くことが出来ます。
HTML canvas
gradient{from:rgba(255, 255, 255, 0.2); to:#888;} => roundedRect{radius:50}
Example
アプリケーションは、1枚のキャンバス内に複数の操作を実行するには、プラグインをカンマ区切りで指定します。
gradient => rect, border => roundedRect{radius:60}
Example
操作を連結する別の方法として、括弧を使用すると、アプリケーションの操作を再帰的に利用することができます。
fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Liquid Canvas | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<!--[if IE]><script type="text/javascript" src="/content/lib/jquery/liquid_canvas/excanvas.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/liquid_canvas/liquid-canvas.js"></script>
<script type="text/javascript" src="/content/lib/jquery/liquid_canvas/liquid-canvas-plugins.js"></script>
<script type="text/javascript">
// register a user defined plugin
$.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();
}
}
});
// First we wait until the document is completely loaded using the handy
// jQuery "ready" method.
$(window).load(function() {
// No we can paint our canvas. Something rounded with a shadow ;-)
$("#example").liquidCanvas("[shadow border gradient] => roundedRect{radius:50}");
var i = 0;
$(".example").each(function(){
var element = $(this);
element.children("h3").html("Example " + (i++));
var example = element.children("em").text();
element.liquidCanvas(example);
});
});
</script>
<style type="text/css">
#example { width:400px; margin:20px 0; padding:40px; }
.example { width:27.9%; margin:1% 0 1% 1%; padding:2%; float:left; overflow:hidden; }
* html .example { height:1%; }
.example h3 { margin:0 0 10px 0; }
.example em { color:#affe73; overflow:auto; background:#000; padding:5px; margin:10px 0; display:block; }
* html .example em { overflow:scroll; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.ruzee.com/content/liquid-canvas'>Liquid Canvas</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>基本的な例</h2>
<div id="example">Liquid Canvasの基本的な例です。</div>
<h2>プラグインを使用したサンプルいろいろ</h2>
<div class="cf">
<div id="example0" class="example">
<h3>Example</h3>
プラグインは、描画操作に使用されます。このfillプラグインは、rectangleプラグイン上で適用されます。この操作は、アプリケーションによって呼び出されます。Grayは、デフォルトのfillスタイルです。
<em>fill => rect</em>
</div><!-- #example0 -->
<div id="example1" class="example">
<h3>Example</h3>
プラグインにプロパティを指定することができます。シンタックスはCSSのようなものです。
<em>fill{color:#f80} => rect</em>
</div><!-- #example1 -->
<div id="example2" class="example">
<h3>Example</h3>
プラグインは丸くて長方形のために存在しています。
<em>fill{color:#fff} => roundedRect</em>
</div><!-- #example2 -->
</div>
<div class="cf">
<div id="example3" class="example">
<h3>Example</h3>
プラグインのプロパティは、右側に指定することもできます。角のカーブを大きくしたい場合は、下記のようにします。
<em>fill => roundedRect{radius:80}</em>
</div><!-- #example3 -->
<div id="example4" class="example">
<h3>Example</h3>
配列のようなシンタックスを使用するとプラグインを連結できます。「shadow」と「fill」両方のプラグインをroundedRect上で連結します。
<em>[shadow fill] => roundedRect</em>
</div><!-- #example4 -->
<div id="example5" class="example">
<h3>Example</h3>
複数のプラグインを連結できます。それぞれのプラグインにプロパティを設定できます。
<em>[shadow border{color:#fff} fill{color:#f80}] => roundedRect{radius:30}</em>
</div><!-- #example5 -->
</div>
<div class="cf">
<div id="example6" class="example">
<h3>Example</h3>
たくさんのプラグインが存在します。「gradient」プラグインは、好きなように描くことが出来ます。
<a href="http://en.wikipedia.org/wiki/Canvas_(HTML_element)">HTML canvas</a>
<em>gradient{from:rgba(255, 255, 255, 0.2); to:#888;} => roundedRect{radius:50}</em>
</div><!-- #example6 -->
<div id="example7" class="example">
<h3>Example</h3>
アプリケーションは、1枚のキャンバス内に複数の操作を実行するには、プラグインをカンマ区切りで指定します。
<em>gradient => rect, border => roundedRect{radius:60}</em>
</div><!-- #example7 -->
<div id="example8" class="example">
<h3>Example</h3>
操作を連結する別の方法として、括弧を使用すると、アプリケーションの操作を再帰的に利用することができます。
<em>fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})</em>
</div><!-- #example8 -->
</div>
<!-- / CODE -->
</div>
</body>
</html>
