uupaa-excanvas.js - Reference

uuCanvas

HTML5::Canvas 互換機能を提供します。

uuCanvas.init(canvas, vml = false) は、動的に生成された canvas 要素を初期化します。 vml に true を指定した場合は、VML でレンダリングするように初期化を行います。

IE 以外のブラウザなら CanvasRenderingContext2D でレンダリングするように初期化を行います。

@param HTMLCanvasElement canvas - createElement("canvas")で動的に生成した(初期化が完了していない)キャンバス要素を指定します。
@param Boolean           [vml]  - VML でレンダリングする場合に true を指定します。デフォルトは false です。
                                  false を指定し Silverlight がインストールされている場合は、
                                  Silverlight でレンダリングします。
                                  Silverlight が未インストールなら false を指定した場合でも VML でレンダリングします。

HTMLファイルに埋め込まれた(静的な) canvas 要素を VML でレンダリングするよう指示するには class="vml" を指定します。

Silverlight と VML は共存可能です。

<body>
<canvas width="300" height="300"></canvas> <!-- Silverlight でレンダリング -->
<canvas class="vml" width="300" height="300"></canvas> <!-- 強制的に VML でレンダリング -->
</body>

uuCanvas.ready

uuCanvas.ready(fn) はレンダリングが可能になったタイミングで fn をコールバックします。

ブラウザ毎に判断が異なります。

Opera - window.onload のタイミングでレンダリング可能になります。
WebKit - document.readyState が "loaded" または "complete" になったタイミングでレンダリング可能になります。
Gecko - document.DOMContentLoaded イベントが発生したタイミングでレンダリング可能になります。
IE - document.readyState が "loaded" または "complete" で、全ての <canvas> 要素の初期化完了でレンダリング可能になります。

上記以外のブラウザでは、デッドロックを回避するため「常にレンダリング可能」として判断し、即座に fn をコールします。

@param Function fn - ページ上の全ての canvas 要素が使用可能になったタイミングでコールバックする関数を指定します。

uuCanvas.already

uuCanvas.already() はページ上の全ての canvas が使用可能なら true を返します。

@return Boolean - ページ上の全ての canvas 要素が使用可能なら true を返します。

uuCanvas Non-standard Properties - 非標準のプロパティ

HTML5::Canvas の仕様にないプロパティの一覧です。
期待したレンダリング結果が得られない場合に、以下の値を調整することで回避可能な場合があります。

Name	Type	Default Value			SL	VML			Note
xMissColor	String	"#000000"	-	-				-	VML, Silverlight, Opera9.5+ で、サポートしていない機能/機能の組み合わせ使用した場合に、使用される色を指定します。以下のケースでxMissColorが使用されます。 VML: stroke() + linear gradient VML: stroke() + radial gradient VML: fillText() + pattern VML: fillText() + linear gradient VML: fillText() + radial gradient VML: strokeText() + pattern VML: strokeText() + linear gradient VML: strokeText() + radial gradient Opera9.5+: fillText() + pattern Opera9.5+: fillText() + linear gradient Opera9.5+: fillText() + radial gradient
xClipStyle	String	canvas 要素の背景色	-	-	-		-	-	clip() で使用する塗りつぶし用のカラーを文字列で指定します。デフォルトは canvas 要素の背景色で塗りつぶします。
xTiling	Number	1 (true)	-	-		-	-	-	createPattern() で読み込まれた画像を敷き詰める(タイリングする)場合に1を指定します。デフォルトは1です。 0を指定するとソフトウェアによるタイリング機能が OFF になります。パフォーマンスを向上するには、0を指定し、タイリング済みのより大きな画像を createPattern() に指定します。 Silverlight がタイリング機能を持たないため、小さな画像をタイリングすると速度が大幅に犠牲になる場合があります。
xShadowBlur	Number	Silverlight3がインストールされていれば1 それ以外なら0	-	-		-	-	-	Silverlight3で導入された、shadowBlur互換機能を使用する場合に1を指定します。 Silverlight3がインストールされた環境で、0を指定すると VML と同様の方法で影をレンダリングします。
xTextMarginTop	Number	1.3	-	-	-		-	-	Silverlight と VML でテキストの上方向のマージンが違う場合に、VML のマージンを調整します。通常は、0.8 から 1.8 までの値を指定します。
xAutoTextRender	Number	1	-	-	-	-			Opera9.5+ と Firefox3. 0で、fillText() のレンダリング方法を指定します。 1 なら、SVG または mozText によるレンダリングを行います。テキストの回転や変形をサポートしますが、Operaで一部のフォントがレンダリングされません。 0 なら、HTML(テキストノード)によるレンダリングを行います。テキストの回転や変形はサポートしませんが、Operaで問題が発生しません。
xFlyweight	Number	0	-	-			-	-	描画速度とメモリ使用量の軽減が必要な場合に1を指定します。 0 なら、drawImage(canvas) と clip() が使用可能になります。 1 なら、drawImage(canvas) と clip() が使用不能になります。描画速度の向上とメモリ使用量の軽減が行われます。

uuCanvas Non-standard Methods - 非標準のメソッド

HTML5::Canvas の仕様にないメソッドの一覧です。

Name			SL	VML			Note
setShadow(color, offsetX, offsetY, blur)							Firefox3.0 に shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur の値を保持しないバグがあるため、これらのプロパティに安全に値を設定する代替手段を提供します。使用例
getShadow()							Firefox3.0 に shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur の値を保持しないバグがあるため、これらのプロパティの代わりに値を取得する手段を提供します。 getShadow() は、Hash( { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } ) を返します。

uuCanvas.Layer

複数の canvas をレイヤー構造化し取り扱いを簡単にします。

uuCanvas.Layer にはカレントコンテキストと、コンテキストスタックという機能があります。
カレントコンテキストは現在利用可能な CanvasRenderingContext2D を保持する機能で、コンテキストスタックは複数の CanvasRenderingContext2D をスタックで管理する機能です。

複数のレイヤーに描画するには、push() と pop() を使用し、カレントコンテキストを切り替えて描画を行います。

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addCanvas("A").addCanvas("B").addCanvas("C").show();
// この時点のカレントコンテキストは "C", コンテキストスタックは空
uuCanvas.ready(function() {
  view.push("A"); // push()実行後のカレントコンテキストは "A", コンテキストスタックは ["C"]
  view.arc(100, 100, 50); // レイヤー "A" の x: 100, y: 100 に r: 50 の円を描画する
  view.push("B"); // push()実行後のカレントコンテキストは "B", コンテキストスタックは ["C", "A"]
  view.arc(120, 120, 50); // レイヤー "B" の x: 120, y: 120 に r: 50 の円を描画する
  view.pop(); // pop()実行後のカレントコンテキストは "A", コンテキストスタックは ["C"]
  view.pop(); // pop()実行後のカレントコンテキストは "C", コンテキストスタックは空
});
</script>

uuCanvas.Layer - initialize - 初期化

uuCanvas.Layer(view = document.body, width = 300, height = 150) は、ビューノード(レイヤーの入れ物となるノード)(view) 要素を受け取り、uuCanvas.Layer インスタンスを生成します。

@param Node view - ビューノードを指定します。
@param Number [w] - レイヤーの幅を指定します。デフォルトは300です。
@param Number [h] - レイヤーの高さを指定します。デフォルトは150です。

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
</script>

uuCanvas.Layer.setPresetData - set preset data

uuCanvas.Layer.setPresetData(name, hash) は、プリセットデータを設定します。

@param String name - プリセット名を指定します。
@param Hash hash   - プリセットデータを指定します。
@return this       - this を返します。

uuCanvas.Layer.addNode - add div layer

uuCanvas.Layer.addNode(id, width = view width, height = view width) は div ノードをレイヤーに追加します。
レイヤーは非表示の状態でビューに追加されます。レイヤーを表示するには show() を実行します。

@param String id - ユニークなレイヤーIDを指定します。
@param Number [width] - レイヤーの幅を指定します。デフォルトは、uuCanvas.Layer で指定した幅です。
@param Number [height] - レイヤーの高さを指定します。デフォルトは、uuCanvas.Layer で指定した高さです。
@return this - this を返します。

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addNode("a");
</script>

uuCanvas.Layer.addCanvas - add canvas layer

uuCanvas.Layer.addCanvas(id, width = view width, height = view width) は canvas ノードをレイヤーに追加します。
カレントコンテキストを上書します。コンテキストスタックは変化しません。
レイヤーは非表示の状態でビューに追加されます。レイヤーを表示するには show() を実行します。

@param String id - ユニークなレイヤーIDを指定します。
@param Number [width] - レイヤーの幅を指定します。デフォルトは、uuCanvas.Layer で指定した幅です。
@param Number [height] - レイヤーの高さを指定します。デフォルトは、uuCanvas.Layer で指定した高さです。
@return this - this を返します。

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addCanvas("a").addCanvas("b");
</script>

uuCanvas.Layer.addVMLCanvas - add VML canvas layer

uuCanvas.Layer.addVMLCanvas(id, width = view width, height = view width) は VML canvas ノードをレイヤーに追加します。
カレントコンテキストを上書します。コンテキストスタックは変化しません。
レイヤーは非表示の状態でビューに追加されます。レイヤーを表示するには show() を実行します。
IE 以外の環境では addCanvas と同じ結果になります。

@param String id - ユニークなレイヤーIDを指定します。
@param Number [width] - レイヤーの幅を指定します。デフォルトは、uuCanvas.Layer で指定した幅です。
@param Number [height] - レイヤーの高さを指定します。デフォルトは、uuCanvas.Layer で指定した高さです。
@return this - this を返します。

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addVMLCanvas("a").addVMLCanvas("b");
</script>

uuCanvas.Layer.remove - remove layer

uuCanvas.Layer.remove(id) はレイヤーを削除します。

RUN

@param String id - レイヤーIDを指定します。
@return this - this を返します。

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addCanvas("a").remove("a");
</script>

uuCanvas.Layer.node - refer layer node

uuCanvas.Layer.node(id) はレイヤーノードの参照を返します。

@param String id - レイヤーIDを指定します。
@return Node - ノードの参照を返します。

uuCanvas.Layer.size - get layer size

uuCanvas.Layer.size() はレイヤー数を返します。

@return Number - レイヤー数を返します。

uuCanvas.Layer.front - get front layer element

uuCanvas.Layer.front() は最前面に位置するレイヤーのIDを返します。

@return String - レイヤーIDを返します。

RUN

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addCanvas("a").addCanvas("b");
view.node("a").style.zIndex = 1;
view.node("b").style.zIndex = 2;
alert(view.front());
</script>

uuCanvas.Layer.rear - get rear layer element

uuCanvas.Layer.rear() は最背面に位置するレイヤーのIDを返します。

@return String - レイヤーIDを返します。

RUN

<div id="view"></div>
<script>
var view = new uuCanvas.Layer(document.getElementById("view"), 300, 150);
view.addCanvas("a").addCanvas("b");
view.node("a").style.zIndex = 1;
view.node("b").style.zIndex = 2;
alert(view.rear());
</script>

uuCanvas.Layer.show - show layer

uuCanvas.Layer.show(id = "") はレイヤーを表示します。

@param String [id] - 表示するレイヤーをレイヤーIDで指定します。デフォルトは 空文字列( "" ) です。
                     "" を指定すると全てのレイヤーを表示します。
@return this - this を返します。

uuCanvas.Layer.hide - hide layer

uuCanvas.Layer.hide(id = "") はレイヤーを非表示にします。

@param String [id] - 非表示にするレイヤーをレイヤーIDで指定します。デフォルトは 空文字列( "" ) です。
                     "" を指定すると全てのレイヤーを非表示にします。
@return this - this を返します。

uuCanvas.Layer.pos - set absolute/relative layer position

uuCanvas.Layer.pos(id = "", x, y, diff = false) はレイヤーを移動します。

@param String [id] - レイヤーIDを指定します。デフォルトは 空文字列( "" ) です。
                     "" を指定すると全てのレイヤーを移動します。
@param Number x - x 座標を指定します。
@param Number y - y 座標を指定します。
@param Boolean [diff] - 絶対座標指定をする場合に ture を、相対座標指定する場合に false を指定します。
                        デフォルトは true です。
@return this - this を返します。

uuCanvas.Layer.getOpacity - get layer opacity value(from 0.0 to 1.0)

uuCanvas.Layer.getOpacity(id) はレイヤーの不透明度を取得します。

@param String id - レイヤーIDを指定します。
@return Number - 不透明度を返します。値は 0.0 ～ 1.0 です。

uuCanvas.Layer.setOpacity - set layer opacity value(from 0.0 to 1.0)

uuCanvas.Layer.setOpacity(id = "", opacity = 1.0, diff = true) はレイヤーの不透明度を設定します。

@param String [id] - レイヤーIDを指定します。デフォルトは 空文字列( "" ) です。
                     "" を指定すると全てのレイヤーの不透明度を設定します。
@param Number [opacity] - 不透明度を 0.0 ～ 1.0 の値で指定します。
                          デフォルトは 1.0 です。
@param Boolean [diff] - 絶対値指定をする場合に ture を、相対値指定する場合に false を指定します。
                        デフォルトは true です。
@return this - this を返します。

uuCanvas.Layer.push - push current context

uuCanvas.Layer.push(id) は、カレントコンテキストをコンテキストスタックの最後に保存し、 id で指定されたレイヤーをカレントコンテキストに設定します。

@param String id - レイヤーIDを指定します。
@return this - this を返します。

uuCanvas.Layer.ctx - refer current context

uuCanvas.Layer.ctx() はカレントコンテキストの参照を返します。

@return CanvasRenderingContext2D/undefined - カレントコンテキストの参照を返します。
                                             カレントコンテキストが存在しない場合は undefined を返します。

uuCanvas.Layer.pop - pop current context

uuCanvas.Layer.pop() は、コンテキストスタックの最後から、カレントコンテキストを取り出し、復元します。スタックが空の場合は、このメソッドは何もしません。

@return this - this を返します。

uuCanvas.Layer.setAlpha - set globalAlpha

uuCanvas.Layer.setAlpha(alpha) は、カレントコンテキストに globalAlpha プロパティの値を設定します。

@param Number alpha
@return this               - this を返します。

uuCanvas.Layer.setFill - set fillStyle

uuCanvas.Layer.setFill(style) は、カレントコンテキストに fillStyle プロパティの値を設定します。

@param String/Object style
@return this               - this を返します。

uuCanvas.Layer.setStroke - set strokeStyle

uuCanvas.Layer.setStroke(style) は、カレントコンテキストに strokeStyle プロパティの値を設定します。

@param String/Object style
@return this               - this を返します。

uuCanvas.Layer.setLine - set line style

uuCanvas.Layer.setLine(width = undefined, cap = undefined, join = undefined, limi = undefined) は、カレントコンテキストに lineWidth, lineCap, lineJoin, miterLimit プロパティの値を設定します。

@param Number [width] - lineWidth を指定します。省略可能です。
@param String [cap] - lineCap を指定します。省略可能です。
@param String [join] - lineJoin を指定します。省略可能です。
@param Number [limit] - miterLimit を指定します。省略可能です。
@return this               - this を返します。

uuCanvas.Layer.setShadow - set shadow style

uuCanvas.Layer.setShadow(color = undefined, offsetX = undefined, offsetY = undefined, blur = undefined) は、カレントコンテキストに shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur プロパティの値を設定します。

@param ColorString [color] - shadowColor を指定します。省略可能です。
@param Number [offsetX]    - shadowOffsetX を指定します。省略可能です。
@param Number [offsetY]    - shadowOffsetY を指定します。省略可能です。
@param Number [blur]       - shadowBlur を指定します。省略可能です。
@return this               - this を返します。

uuCanvas.Layer.setText - set text style

uuCanvas.Layer.setText(font = undefined, align = undefined, baseline = undefined) は、カレントコンテキストに font, textAlign, textBaseline プロパティの値を設定します。

@param CSSFontString [font]
@param String [align]
@param String [baseline]
@return this               - this を返します。

uuCanvas.Layer.set - set style - スタイルを指定

uuCanvas.Layer.set(style) は、カレントコンテキストの描画スタイルを設定します。

@param StyleNameHash style - StyleNameHash( { StyleName: value, ... } )を指定します。
                             StyleName には HTML5::Canvas 標準のスタイル名を指定します。
@return this               - this を返します。

StyleName	Type	Default value	Note
globalAlpha	Number	1.0	キャンバス全体の不透明度(0.0～1.0)を指定
fillStyle	ColorString or CanvasGradient or CanvasPattern	"black"	塗りつぶす色,グラデーション,画像パターンを指定
strokeStyle	ColorString or CanvasGradient or CanvasPattern	"black"	線の色,グラデーション,画像パターンを指定
lineWidth	Number	1	線の太さを指定
lineCap	String	"butt"	線の終端方法を指定 "butt", "round", "square"
lineJoin	String	"miter"	線と線のつなぎ方を指定 "round", "bevel", "miter"
miterLimit	Number	10.0	太さを持つ線と線の接合点と線の外側までの距離を制限を指定 (接着部分のバリとり)
shadowColor	ColorString	"rgba(0,0,0,0)" (transparent black)	影の色を指定
shadowOffsetX	Number	0	影のぼかしの水平方向に対するオフセットを指定
shadowOffsetY	Number	0	影のぼかしの垂直方向に対するオフセットを指定
shadowBlur	Number	0	影のぼかしを指定
font	CSS font String	"10px sans-serif"	フォントの大きさ太さ,ファミリーを指定
textAlign	String	"start"	テキストの水平方向の配置方法を指定 "start", "end", "left", "right", "center"
textBaseline	String	"top" (本来は"alphabetic")	テキストの垂直方向の位置あわせを指定 "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"
globalCompositeOperation	String	"source-over"	キャンバスの合成方法を指定 "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "copy", "xor", "lighter", "darker"

uuCanvas.Layer.get - get style - スタイルを取得

uuCanvas.Layer.get(style) は、カレントコンテキストの描画スタイルを取得します。

@param StyleNameHash style - StyleNameHash( { StyleName: value, ... } )を指定します。
                             StyleName には HTML5::Canvas 標準のスタイル名を指定します。
@return StyleNameHash      - value に値を格納した Hash を返します。

uuCanvas.Layer.clear - clear rect - 矩形範囲のクリア

uuCanvas.Layer.clear(x = 0, y = 0, w = canvas.width, h = canvas.height) はカレントコンテキストから、x, y, w, h で指定された矩形範囲をクリアします。全ての引数を省略すると、カレントコンテキストのキャンバス全体をクリアします。

@param Number [x] - x 座標を指定します。デフォルトは0です。
@param Number [y] - y 座標を指定します。デフォルトは0です。
@param Number [w] - 幅を指定します。デフォルトは canvas.width です。
@param Number [h] - 高さを指定します。デフォルトは canvas.height です。
@return this      - this を返します。

このメソッドは CanvasRenderingContext2D.clearRect() を呼び出すラッパーです。

uuCanvas.Layer.scale - scale - 拡大/縮小率を指定

uuCanvas.Layer.scale(w, h) は、カレントコンテキストの拡大縮小率を w, hで指定します。

@param Number w - 水平方向の拡大/縮小率を指定します。2を指定すると倍, 0.5を指定すると半分になります。
@param Number h - 垂直方向の拡大/縮小率を指定します。2を指定すると倍, 0.5を指定すると半分になります。
@return this    - this を返します。

このメソッドは CanvasRenderingContext2D.scale() を呼び出すラッパーです。

負の値を指定すると反転した状態で描画されます。

uuCanvas.Layer.translate - offset origin - 原点からのオフセットを指定

uuCanvas.Layer.translate(x, y) は、カレントコンテキストの原点(左上隅)からのオフセット値を x, y で指定します。

@param Number x - 原点からの x 座標のオフセット値を指定します。
@param Number h - 原点からの y 座標のオフセット値を指定します。
@return this    - this を返します。

このメソッドは CanvasRenderingContext2D.translate() を呼び出すラッパーです。

uuCanvas.Layer.rotate - rotate - キャンバスを回転

uuCanvas.Layer.rotate(angle) は、カレントコンテキストのキャンバスの回転角度を指定します。

@param Number/String angle - 回転角を数値または単位付の角度で指定します。
                             degree(0～359)で指定する場合は、"359deg" と指定します。
                             radian(0～6.283185307[2π])で指定する場合は、"6.283185307rad" と指定します。
                             数値を指定すると deg 単位の値として解釈します。
@return this               - this を返します。

このメソッドは CanvasRenderingContext2D.rotate() を呼び出すラッパーです。

uuCanvas.Layer.begin - beginPath + moveTo

uuCanvas.Layer.begin(x = undefined, y = undefined) は、カレントコンテキストのサブパスを初期化し、新しいサブパスを開始します。

x または y のいずれかが指定された場合は、move(x, y) を行います。
省略された引数は 0 が指定されたものとして扱います。両方省略した場合は move を呼び出しません。

@param Number [x] - 移動先の x 座標を指定します。デフォルトは undefined です。
@param Number [y] - 移動先の y 座標を指定します。デフォルトは undefined です。
@return this      - this を返します。

このメソッドは CanvasRenderingContext2D.beginPath(), CanvasRenderingContext2D.moveTo() 相当の機能を併せ持つコンビニエンスメソッドです。

uuCanvas.Layer.move - moveTo

uuCanvas.Layer.move(x, y) は、カレントコンテキストのサブパスの終点を x, y に移動します。

@param Number x - 移動先の x 座標を指定します。
@param Number y - 移動先の y 座標を指定します。
@return this    - this を返します。

このメソッドは CanvasRenderingContext2D.moveTo() を呼び出すラッパーです。

uuCanvas.Layer.line - lineTo

uuCanvas.Layer.line(x, y) は、カレントコンテキストのサブパスの終点から x, y に直線を引き、サブパスの終点を移動します。

@param Number x - 移動先の x 座標を指定します。
@param Number y - 移動先の y 座標を指定します。
@return this    - this を返します。

このメソッドは CanvasRenderingContext2D.lineTo() を呼び出すラッパーです。

uuCanvas.Layer.arc - arc

uuCanvas.Layer.arc(x, y, r, a0 = "0deg", a1 = "359deg", clock = true) は、カレントコンテキストのサブパスの終点から円弧の始点まで直線を引き、x, y を中心とする半径 r の円弧を、サブパスに追加し、サブパスの終点を移動します。

円弧の始点は a0 で指定し、終点は a1 で指定します。 clock に false を指定すると反時計周りに書かれた円弧をサブパスに追加します。

@param Number x           - 円弧の中心 x を指定します。
@param Number y           - 円弧の中心 y を指定します。
@param Number r           - 半径を 1 以上の値で指定します。
@param Number/String [a0] - 円弧の始点を数値または単位付の角度で指定します。デフォルトは "0deg" です。
                            degree(0～359)で指定する場合は、"359deg" と指定します。
                            radian(0～6.283185307[2π])で指定する場合は、"6.283185307rad" と指定します。
                            数値を指定すると deg 単位の値として解釈します。
@param Number/String [a1] - 円弧の終点を数値または単位付の角度で指定します。デフォルトは "359deg" です。
                            degree(0～359)で指定する場合は、"359deg" と指定します。
                            radian(0～6.283185307[2π])で指定する場合は、"6.283185307rad" と指定します。
                            数値を指定すると deg 単位の値として解釈します。
@param Boolean [clock]    - 円弧の描画方向を指定します。デフォルトは true です。
                            true を指定すると時計周りに描画します。
                            false を指定すると反時計周りに描画します。
@return this              - this を返します。

このメソッドは CanvasRenderingContext2D.arc() を呼び出すラッパーです。

uuCanvas.Layer.curve - quadraticCurveTo or bezierCurveTo

uuCanvas.Layer.curve(a0, a1, a2, a3, a4, a5) は、カレントコンテキストのサブパスの終点から始まる曲線(ベジェ曲線または二次曲線)をサブパスに追加し、サブパスの終点を移動します。

5つ以上の引数を指定するとベジェ曲線をサブパスに追加し、4つ以下なら二次曲線をサブパスに追加します。

ベジェ曲線
@param Number a0 - 1つ目の制御点 x を指定します。
@param Number a1 - 1つ目の制御点 y を指定します。
@param Number a2 - 2つ目の制御点 x を指定します。
@param Number a3 - 2つ目の制御点 y を指定します。
@param Number a4 - サブパスの終点 x を指定します。
@param Number a5 - サブパスの終点 y を指定します。
@return this     - this を返します。

二次曲線
@param Number a0 - 制御点 x を指定します。
@param Number a1 - 制御点 y を指定します。
@param Number a2 - サブパスの終点 x を指定します。
@param Number a3 - サブパスの終点 y を指定します。
@return this     - this を返します。

このメソッドは CanvasRenderingContext2D.bezierCurveTo() または CanvasRenderingContext2D.quadraticCurveTo() を呼び出すラッパーです。

uuCanvas.Layer.clip - clip

uuCanvas.Layer.clip() は、カレントコンテキストのサブパスを元にクリッピングパスを生成します。

@return this - this を返します。

このメソッドは CanvasRenderingContext2D.clip() を呼び出すラッパーです。

uuCanvas.Layer.stroke - stroke

uuCanvas.Layer.stroke() は、カレントコンテキストのサブパスに沿った線を描画します。
線のスタイルは、setStroke() や setLine() で指定します。

@return this - this を返します。

このメソッドは CanvasRenderingContext2D.stroke() を呼び出すラッパーです。

uuCanvas.Layer.fill - fill or stroke

uuCanvas.Layer.fill(wire = false) は、カレントコンテキストのサブパスの内側を塗りつぶします。
塗りつぶすスタイルは、setFill() で指定します。

wire が true なら stroke() と同じ結果になります。

@param Boolean [wire] - サブパスに沿った線を描画する場合に true を指定します。デフォルトは false です。
                        false を指定するとサブパスの内側を塗りつぶします。
@return this          - this を返します。

このメソッドは CanvasRenderingContext2D.fill() または CanvasRenderingContext2D.stroke() を呼び出すラッパーです。

uuCanvas.Layer.text - text

uuCanvas.Layer.text(text, x = 0, y = 0, wire = false, maxWidth = undefined) は、カレントコンテキストにテキストを描画します。

@param String  text       - テキスト文字列を指定します。
@param Number  [x]        - 描画開始位置の x 座標を指定します。デフォルトは 0 です。
@param Number  [y]        - 描画開始位置の y 座標を指定します。デフォルトは 0 です。
@param Boolean [wire]     - フォントのアウトラインを描画する場合に true を指定します。デフォルトは false です。
                            false を指定すると塗りつぶしたテキストを描画します。
@param Number  [maxWidth] - テキストの最大長を指定します。
                            (現在のところ uupaa-excanvas.js はこの引数を無視します)
@return this              - this を返します。

このメソッドは CanvasRenderingContext2D.fillText() または CanvasRenderingContext2D.strokeText() を呼び出すラッパーです。

uuCanvas.Layer.getTextSize - get text dimension

uuCanvas.Layer.getTextSize(text) は、カレントコンテキストにテキストが描画された場合の大きさを取得します(描画はしません)。

@param String  text - テキスト文字列を指定します。
@return TextMetrics - TextMetrics( { width: 幅, height: 高さ } ) を返します。

IE(Silverlight, VML), Opera, Firefox3.0 の場合は height に有効な値が設定されますが、バックエンドが CanvasRenderingContext2D の場合は undefined になります。

このメソッドは CanvasRenderingContext2D.measureText() を呼び出すラッパーです。

uuCanvas.Layer.close - closePath

uuCanvas.Layer.close(x = undefined, y = undefined) は、カレントコンテキストのサブパスを閉じ、新たなサブパスを開始します。

@param Number [x] - 移動先の x 座標を指定します。デフォルトは undefined です。
@param Number [y] - 移動先の y 座標を指定します。デフォルトは undefined です。
@return this      - this を返します。

このメソッドは CanvasRenderingContext2D.closePath(), CanvasRenderingContext2D.moveTo() 相当の機能を併せ持つコンビニエンスメソッドです。

uuCanvas.Layer.poly - poly line + fill

uuCanvas.Layer.poly(point, wire = false) は、カレントコンテキストのサブパスの終点から point で指定された座標に直線を引き内部を塗りつぶします。

point には Array( [x0, y0, x1, y1, ... ] ) のように2つで一組の座標を指定します。

@param PointArray point  - 座標のペアを Array( [x, y, ...] ) の形で指定します。
@param Boolean    [wire] - サブパスに沿った線を描画する場合に true を指定します。デフォルトは false です。
                           false を指定するとサブパスの内側を塗りつぶします。
@return this             - this を返します。

このメソッドは以下の機能を呼び出すコンビニエンスメソッドです。

CanvasRenderingContext2D.beginPath()
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.stroke()
CanvasRenderingContext2D.closePath()

uuCanvas.Layer.box - add box path, fill inside - Box状のパスを追加し内部を塗りつぶす

uuCanvas.Layer.box(x, y, w, h, r = 0, wire = false) は、カレントコンテキストに box 状のパスを作成し内部を塗りつぶします。

角丸の box を描画できます。

@param Number x       - 始点 x を指定します。
@param Number y       - 始点 y を指定します。
@param Number w       - 幅を指定します。
@param Number h       - 高さを指定します。
@param Number [r]     - コーナーの丸み(角丸の角度)を指定します。デフォルトは 0 です。
                        0 を指定すると直角になります。
@param Boolean [wire] - サブパスに沿った線を描画する場合に true を指定します。デフォルトは false です。
                        false を指定するとサブパスの内側を塗りつぶします。
@return this          - this を返します。

このメソッドは以下の機能を呼び出すコンビニエンスメソッドです。

CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.fillRect()
CanvasRenderingContext2D.beginPath()
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.quadraticCurveTo()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.closePath()

uuCanvas.Layer.metabo - metabolic box - メタボ Box

uuCanvas.Layer.metabo(x, y, w, h, r = 0, tarun = 10, wire = false) は、カレントコンテキストに box 状のパスを作成し内部を塗りつぶします。

角丸の box に、たるっとした光沢を描画できます。

@param Number x       - 始点 x を指定します。
@param Number y       - 始点 y を指定します。
@param Number w       - 幅を指定します。
@param Number h       - 高さを指定します。
@param Number [r]     - コーナーの丸み(角丸の角度)を指定します。デフォルトは 0 です。
                        0 を指定すると直角になります。
@param Number [tarun] - 光沢の丸みを指定します。デフォルトは 10 です。
@param Boolean [wire] - サブパスに沿った線を描画する場合に true を指定します。デフォルトは false です。
                        false を指定するとサブパスの内側を塗りつぶします。
@return this          - this を返します。

このメソッドは以下の機能を呼び出すコンビニエンスメソッドです。

CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.fillRect()
CanvasRenderingContext2D.beginPath()
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.quadraticCurveTo()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.closePath()

uuCanvas.Layer.oval - oval + fill

uuCanvas.Layer.oval(x, y, w, h, r, wire = false) は、カレントコンテキストのサブパスの終点から x, y の位置に半径 r の円または楕円のサブパスを生成し内部を塗りつぶします。

w と h に異なる値を指定すると楕円を描画します。
(楕円の描画機能は未実装です)

@param Number x       - 円の中心 x を指定します。
@param Number y       - 円の中心 y を指定します。
@param Number w       - 幅を指定します。
@param Number h       - 高さを指定します。
@param Number r       - 半径を指定します。
@param Boolean [wire] - サブパスに沿った線を描画する場合に true を指定します。デフォルトは false です。
                        false を指定するとサブパスの内側を塗りつぶします。
@return this          - this を返します。

このメソッドは以下の機能を呼び出すコンビニエンスメソッドです。

CanvasRenderingContext2D.beginPath()
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.arc()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.stroke()
CanvasRenderingContext2D.closePath()

uuCanvas.Layer.dots - draw dot character

uuCanvas.Layer.dots(x, y, w, h, palette, data, index = 0) は、カレントコンテキストの x, y の位置に幅 w 高さ h のドットの塊を描画します。

palette には色の配列を指定し、data にはドットデータを指定します。

@param Number x           - 始点 x を指定します。
@param Number y           - 始点 y を指定します。
@param Number w           - アイコンの幅を指定します。
@param Number h           - アイコンの高さを指定します。
@param Hash   palette     - カラーパレットを指定します。
@param Array  data        - ドットデータを Array( [パレット番号, ... ] )で指定します。
@param Number [index]     - data の読み出し開始位置を指定します。デフォルトは 0 です。
@return this              - this を返します。

このメソッドは CanvasRenderingContext2D.fillRect() を連続で呼び出すラッパーです。

uuCanvas.Layer.grad - gradation

uuCanvas.Layer.grad(pos, offsetColor) は、カレントコンテキストに直線グラデーションまたは円形グラデーションを生成し返します。

pos の要素数が 5 以上なら円形グラデーションの指定になります。

offsetColor にはオフセット値と色のペアを指定します。

線形グラデーション
@param NumberArray pos              - Array( [x1, y1, x2, y2] ) を指定します。
                                      x1, y1 には グラデーションの開始位置を指定します。
                                      x2, y2 には グラデーションの終了位置を指定します。
@param OffsetColorArray offsetColor - オフセット値と色のペアを Array( [offset, color, ...] ) の形で指定します。
                                      offset には 0.0 ～ 1.0 の数値を指定します。
                                      color には "black" や "#000000" などの色文字列を指定します。
@return this                        - this を返します。

円形グラデーション
@param NumberArray pos              - Array( [x1, y1, r1, x2, y2, r2] ) を指定します。
                                      x1, y1, r1 には 円形グラデーションの内円の中心点と半径を指定します。
                                      x2, y2, r2 には 円形グラデーションの外円の中心点と半径を指定します。
@param OffsetColorArray offsetColor - オフセット値と色のペアを Array( [offset, color, ...] ) の形で指定します。
                                      offset には 0.0 ～ 1.0 の数値を指定します。
                                      color には "black" や "#000000" などの色文字列を指定します。
@return this                        - this を返します。

このメソッドは CanvasRenderingContext2D.createLinearGradient() または CanvasRenderingContext2D.createRadialGradient() と CanvasGradient.addColorStop() を呼び出すラッパーです。

uuCanvas.Layer.pattern - pattern

uuCanvas.Layer.pattern(image, pattern = "repeat") は、画像または他の canvas を元にカレントコンテキスト用のパターンを生成し返します。

@param HTMLImageElement   image    - 画像要素または canvas 要素を指定します。
       /HTMLCanvasElement            バックエンドが Silverlight または VML の場合は canvas 要素を指定できません。
@param String             [repeat] - タイリング方法を指定します。デフォルトは "repeat" です。
                                     "repeat" 以外の値は推奨されません(使用できません)。
@return this                       - this を返します。

このメソッドは CanvasRenderingContext2D.createPattern() を呼び出すラッパーです。

uuCanvas.Layer.image - image

uuCanvas.Layer.image(image, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8) は、カレントコンテキストに画像を描画します。

引数の数により、以下の4通りの方法で描画します。

image(image) - image を canvas の原点(0,0)にそのままの大きさで描画(コピー)します。
image(image, arg1, arg2) - image を dx:arg1, dy:arg2 の位置にそのままの大きさで描画(コピー)します。
image(image, arg1, arg2, arg3, arg4) - image を dx:arg1, dy:arg2 の位置に、dw:arg3, dh:arg4 の大きさに拡大/縮小した状態で描画します。
image(image, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8) - image の sx:arg1, sy:arg2 から sw:arg3, sh:arg4 の矩形を切り出し、dx:arg5, dy:arg6の位置に dw:arg7, dh:arg8 の大きさに拡大/縮小した状態で描画します。

@param HTMLImageElement   image - 画像要素または canvas 要素を指定します。
       /HTMLCanvasElement
@param Number [arg1]
@param Number [arg2]
@param Number [arg3]
@param Number [arg4]
@param Number [arg5]
@param Number [arg6]
@param Number [arg7]
@param Number [arg8]
@return this         - this を返します。

このメソッドは CanvasRenderingContext2D.drawImage() を呼び出すラッパーです。

uuCanvas.Layer.fitimg - auto-scaling image

uuCanvas.Layer.image(image) は、画像をカレントコンテキストのキャンバスの大きさに合わせて自動的にスケーリングし、カレントコンテキストに画像を描画します。

@param HTMLImageElement   image - 画像要素または canvas 要素を指定します。
       /HTMLCanvasElement
@return this                    - this を返します。

uuCanvas.Layer.grid - draw hatch

uuCanvas.Layer.grid(size = 10, unit = 5, color = "skyblue", color2 = "steelblue") は、カレントコンテキストにグリッドパターンを描画します。

@param Number [size]   - グリッドの大きさを指定します。デフォルトは 10 です。
@param Number [unit]   - 区切り線を追加する間隔を指定します。デフォルトは 5 です。
@param Number [color]  - グリッドカラーを指定します。デフォルトは "skyblue" です。
@param Number [color2] - 区切り線のカラーを指定します。デフォルトは "steelblue" です。
@return this           - this を返します。

uuCanvas.Layer.angleGlossy

uuCanvas.Layer.angleGlossy(x, y, preset = "GLOSSYBLACK", extend = undefined) は、カレントコンテキストに角度付きの光沢を持つ画像を描画します。

@param Number x        - 始点 x を指定します。
@param Number y        - 始点 y を指定します。
@param String [preset] - プリセットスタイル名を文字列で指定します。デフォルトは "GLOSSYBLACK" です。
                         PresetStyle は 大文字小文字を区別しません。
@param Hash   [extend] - 拡張スタイルを Hash( { w, h, r, angle, gcolor1, gcolor2, overlayAlpha } ) で指定します。デフォルトは undefined です。
                         w には 幅 を指定します。
                         h には 高さ を指定します。
                         r には コーナーの丸み(角丸の角度)を指定します。0 を指定すると直角になります。
                         angle には 光沢の角度を -45 ～ 45 で指定します。0 を指定すると水平になります。
                         gcolor1 には 線形グラデーション開始色 を指定します。
                         gcolor2 には 線形グラデーション終了色 を指定します。
                         overlayAlpha には オーバーレイカラーの alpha 値 を指定します。
@return this           - this を返します。

uuCanvas.Layer.metaboGlossy

uuCanvas.Layer.metaboGlossy(x, y, preset = "GLOSSYBLACK", extend = undefined) は、カレントコンテキストにたるっとした光沢を持つ画像を描画します。

@param Number x        - 始点 x を指定します。
@param Number y        - 始点 y を指定します。
@param String [preset] - プリセットスタイル名を文字列で指定します。デフォルトは "GLOSSYBLACK" です。
                         PresetStyle は 大文字小文字を区別しません。
@param Hash   [extend] - 拡張スタイルを Hash( { w, h, r, angle, gcolor1, gcolor2, overlayAlpha } ) で指定します。デフォルトは undefined です。
                         w には 幅 を指定します。
                         h には 高さ を指定します。
                         r には コーナーの丸み(角丸の角度)を指定します。0 を指定すると直角になります。
                         angle には 光沢の角度を -45 ～ 45 で指定します。0 を指定すると水平になります。
                         gcolor1 には 線形グラデーション開始色 を指定します。
                         gcolor2 には 線形グラデーション終了色 を指定します。
                         overlayAlpha には オーバーレイカラーの alpha 値 を指定します。
@return this           - this を返します。

uuCanvas.Layer.jellyBean

uuCanvas.Layer.jellyBean(x, y, preset = "GLOSSYBLACK", extend = undefined) は、カレントコンテキストにジェリービーンズのような画像を描画します。

@param Number x        - 始点 x を指定します。
@param Number y        - 始点 y を指定します。
@param String [preset] - プリセットスタイル名を文字列で指定します。デフォルトは "GLOSSYBLACK" です。
                         PresetStyle は 大文字小文字を区別しません。
@param Hash   [extend] - 拡張スタイルを Hash( { w, h, r, angle, gcolor1, gcolor2, overlayAlpha } ) で指定します。デフォルトは undefined です。
                         w には 幅 を指定します。
                         h には 高さ を指定します。
                         r には コーナーの丸み(角丸の角度)を指定します。0 を指定すると直角になります。
                         angle には 光沢の角度を -45 ～ 45 で指定します。0 を指定すると水平になります。
                         gcolor1 には 線形グラデーション開始色 を指定します。
                         gcolor2 には 線形グラデーション終了色 を指定します。
                         overlayAlpha には オーバーレイカラーの alpha 値 を指定します。
@return this           - this を返します。

uuCanvas.Color

色名辞書と簡単なフィルター機能を提供します。

uuCanvas.Color.hash - color hash

uuCanvas.Color.hash はカラーハッシュを提供します。

W3C Named Color: "pink" や "skyblue" といったキーから "#ffc0cb", "#87ceeb" といった値を取得できます。
ファミコンカラー: "fc00" から "fc3f" までのキーから "#7b7b7b", "#000000f" といった値を取得できます。

RUN

alert(uuCanvas.Color.hash["pink"]); // "#ffc0cb"

uuCanvas.Color.hex - return Hex Color String( "#ffffff" )

uuCanvas.Color.hex(rgba) は、RGBAHash を HexColorStringに変換し返します。

@param RGBAHash rgba   - RGBAHash( { r, g, b, a } )を指定します。
@return HexColorString - HexColorString( "#ffffff" )を返します。

RUN

alert(uuCanvas.Color.hex({r:255,g:255,b:255,a:1})); // "#ffffff"

uuCanvas.Color.rgba - return RGBA Color String( "rgba(0,0,0,0)" )

uuCanvas.Color.rgba(rgba) は、RGBAHash を RGBA色文字列に変換し返します。

@param RGBAHash rgba    - RGBAHash( { r, g, b, a } )を指定します。
@return RGBAColorString - RGBAColorString( "rgba(0,0,0,0)" )を返します。

RUN

alert(uuCanvas.Color.rgba({r:255,g:255,b:255,a:1})); // "rgba(255,255,255,1)"

uuCanvas.Color.arrange - arrangemented color(Hue, Saturation and Value) - 色相(H), 彩度(S), 明度(V)をアレンジする

uuCanvas.Color.arrange(rgba, h = 0, s = 0, v = 0) は、 RGBAHash を Hue(色相), Saturation(彩度), Value(明度:brightness)でアレンジした RGBAHash を返します。

値は相対値で指定します。
h は、0～360までの色空間を持っており、360と0は連続した色空間として扱われます。
s と v は連続した空間ではなく、 0～100 に収まらない値は、0～100に丸められます。

@param RGBAHash rgba - RGBAHash( { r, g, b, a } )を指定します。
@param Number   [h]  - Hueの増減値(-360～0～360)を指定します。省略可能です。
                       計算結果が0～360を超えた場合は、0～360の値に収まるように補正します。
@param Number   [s]  - Saturationの増減値(-100～0～100)を指定します。省略可能です。
                       計算結果が0以下なら0に、100を超えた場合は100に補正します。
@param Number   [v]  - Valueの増減値(-100～0～100)を指定します。省略可能です。
                       計算結果が0以下なら0に、100を超えた場合は100に補正します。
@return RGBAHash     - RGBAHash( { r,g,b,a } ) を返します。

RUN

alert(uuCanvas.Color.rgba(uuCanvas.Color.arrange({r:100,g:0,b:0,a:1}, 20, 20, 20))); // "rgba(150,50,0,1)"

uuCanvas.Color.parse - parse color

uuCanvas.Color.parse(color) は、色文字列(color) を HexColorString と alpha 値に分解し、配列を返します。

@param RGBAColorString      color - 色文字列を指定します。
       /HexColorString
       /W3CNamedColorString
@return Array - [HexColorString, alpha] を返します。alpha は 0.0 ～ 1.0 までの数値です。

RUN

alert(uuCanvas.Color.parse("rgba(99.8%, 12.3%, 233, 0.2)")[0]); // "#fe1fe9"

uuCanvas.Color.hex2rgba - convert Hex Color String( "#ffffff" ) to RGBAHash

uuCanvas.Color.hex2rgba(hex) は、HexColorString を RGBAHash に変換します。

@param HexColorString hex - HexColorString( "#ffffff" )を指定します。
@return RGBAHash - RGBAHash( { r,g,b,a } ) を返します。