W2U開発wiki

• ベクター画像を描画するクラス。
• draw()メソッドを呼ぶか、Shapeの中に突っ込まないと描画されない。
• 全メソッドが自分自身を返すので、メソッドチェーンが使える。

• 任意。Graphicsクラスのメソッドを並べたeval文字列を渡す。

• 引数なし。drawメソッドで直接描画するパターン

    // Canvas要素を取得
    var canvas1 = document.getElementById("canvas");
    var ctx = canvas1.getContext("2d");
    // Graphicsオブジェクトを作成
    var g = new Graphics();
    // 好きな図形を描画
    g.setStrokeStyle(16, "round", "round")
    g.beginStroke("#FF0");
    g.moveTo(50,50).lineTo(100,100).lineTo(100,150);
    // drawメソッドで描画
    g.draw(ctx);

• 引数なし。Shapeの中に突っ込んでみるパターン。

    // Canvas要素を取得
    var canvas1 = document.getElementById("canvas");
    // Canvas要素からStageオブジェクトを作成
    var stage1 = new Stage(canvas1);
     // Graphicsオブジェクトを作成
     var g = new Graphics();
    g.setStrokeStyle(16, "round", "round")
    g.beginStroke("#FF0");
    g.moveTo(50,50).lineTo(100,100).lineTo(100,150);
    // 引数にGraphicsオブジェクトを渡してShapeを作成
    var shape1 = new Shape(g);
    // ShapeをStageオブジェクトに設定
    stage1.addChild(shape1);
    // Stageを再描画
    stage1.update();

Maps the familiar ActionScript curveTo() method to the functionally similar quatraticCurveTo() method.

• わかりません。

Maps the familiar ActionScript drawRect() method to the functionally similar rect() method.

• わかりません。。

• "butt", "round", "square"の文字列が配列で入っている。setStrokeStyleメソッド参照。

• "miter", "round", "bevel"の文字列が配列で入っている。setStrokeStyleメソッド参照。

• 描画を始める前に、beginXXXX系のメソッドを呼ぶ必要がある。
  • 線を描くbeginFill系と、線の内部を塗りつぶすbeginStroke系の２種類がある。
  • もう一度同じ系統のbeginXXXを呼ぶか、endXXXを呼ばない限り描画設定がリセットされない。

var g = new Graphics();
g.beginStroke("#F00").setStrokeStyle(15).drawCircle(50, 70, 20); // 赤い25pxの太線で円を描画
g.beginFill("#00F").drawCircle(140, 160, 20); // beginStrokeの設定がリセットされていないので、青丸の周りに太い赤線が入ってしまう。

var g = new Graphics();
g.beginStroke("#F00").setStrokeStyle(15).drawCircle(50, 70, 20).endStroke(); // 今度はちゃんとendStrokeで設定をクリアしておく
g.beginFill("#00F").drawCircle(140, 160, 20); // 赤枠が消える

• 弧を描く。参考→http://www.html5.jp/canvas/ref/method/arc.html

var g = new Graphics();
var startAngle = 0;                 // 開始地点角度
var endAngle = 120 * Math.PI / 180; // 終了地点角度
g.beginStroke("#F00").arc(70, 70, 40, startAngle, endAngle, false);
g.beginFill("#F00").arc(130, 130, 30, startAngle, endAngle, true);

• 現在の地点→{x1, y1}→{x2, y2}へと移動するときに、半径radiusの孤を描くようにする。
• 参考→http://www.html5.jp/canvas/ref/method/arcTo.html
• arcToを呼ぶ前に「現在の地点」が決まっている必要がある。

var g = new Graphics();
// 座標{10,10}から開始。{120, 80}→{40, 160}へ線を描くときに半径30の孤を描くようにする
g.beginStroke("#F00").moveTo(10,10).arcTo(120, 80, 40, 160, 30).endStroke();
// キーとなる座標に点を打ってみる
g.beginFill("#00F").drawCircle(10, 10, 2);  //  { 10, 10}
g.beginFill("#00F").drawCircle(120, 80, 2); //  {120, 80}
g.beginFill("#00F").drawCircle(40, 160, 2); //  { 40,160}

• 画像で埋め尽くしながら塗りつぶして描画する。
• repetitionには"repeat", "repeat-x", "repeat-y", "no-repeat"が指定できる。デフォルトは"repeat"。

var img = new Image();
img.src = "img/ana.jpg";
img.onload = function(){
    var g = new Graphics();
    // 画像で埋め尽くして四角形を描画
    g.beginBitmapFill(img, "repeat").rect(10,10, 150, 150);
    // 以下略
};

• 画像で埋め尽くしながら線を描画する。

var g = new Graphics();
// 画像を背景にして、太さ15の線を引く
g.beginBitmapStroke(img, "repeat").setStrokeStyle(15)
.moveTo(0,0).lineTo(50,50).lineTo(80,150).lineTo(200,70);

• 引数のcolorで塗りつぶした図形の描画を開始する。

var g = new Graphics();
g.beginFill("#F00").rect(10,30,100,120);
return g;

• 線形グラデーションを指定する。
• colorsにはグラデーションさせる色を配列で、ratiosには0〜1の値を配列で指定する(colorsの要素数と同じになるように）。
• うまく説明できないので参考に→http://www.html5.jp/canvas/how4.html

var g = new Graphics();
// {0,0}の地点からグラデーションが始まり、{0,120}の地点でグラデーションが終了する。
// このグラデーション範囲内で、#000→#FFF→#00Fの順に色が変化する。
// それぞれの色は、グラデーション範囲内の0(開始点)、0.7、1(終了点)の位置でちょうどその色になる。
g.beginLinearGradientFill(["#000","#FFF", "#00F"], [0, 0.7, 1], 0, 0, 0, 120).rect(20, 20, 150, 150);

• ※グラデーション開始点{0,0}より下の{20,20}から四角形を描画しているので、黒(#000)の途中からグラデーションが始まっているように見える。

• 線形グラデーションを指定する。
• beginLinearGradientFillの線バージョン。

var g = new Graphics();
g.beginLinearGradientStroke(["#000","#FFF", "#00F"], [0, 0.7, 1], 0, 0, 0, 120)
.setStrokeStyle(15).moveTo(0,0).lineTo(50,50).lineTo(80,150).lineTo(200,70);

• 円形グラデーションを指定する。
• 開始の円(x0, y0, r0)と終了の円(x1, y1, r1)の間でグラデーションされる。
• colorsにはグラデーションさせる色を配列で、ratiosには0〜1の値を配列で指定する(colorsの要素数と同じになるように）。
• うまく説明できないので参考に→http://www.html5.jp/canvas/how5.html

var g = new Graphics();
g.beginRadialGradientFill(["#000","#FFF", "#00F"], [0, 0.7, 1], 60, 60, 30, 60, 60, 100)
.rect(20, 20, 150, 150);

• 円形グラデーションを指定する。
• beginRadialGradientFillの線バージョン。

var g = new Graphics();
g.beginRadialGradientStroke(["#000","#FFF", "#00F"], [0, 0.7, 1], 60, 60, 30, 60, 60, 100)
.setStrokeStyle(15).moveTo(0,0).lineTo(50,50).lineTo(80,150).lineTo(200,70);

• 色を指定して線の描画を開始する。

var g = new Graphics();
g.beginStroke("#0F0")
.setStrokeStyle(15).moveTo(0,0).lineTo(50,50).lineTo(80,150).lineTo(200,70);

• ベジエ曲線を引く。参考→http://www.html5.jp/canvas/ref/method/bezierCurveT...

var g = new Graphics();
g.beginStroke("#0F0")
.moveTo(10,10).bezierCurveTo(30, 190, 70, 160, 190, 10).endStroke();
// キーとなる座標に点を打ってみる
g.beginFill("#00F")
.drawCircle(10, 10, 2).drawCircle(30, 190, 2).drawCircle(70, 160, 2).drawCircle(190, 10, 2);

• 描画中の内容を全てクリアする。

• 自身のクローンを作る。描画中の内容もコピーされる。

• 描画中のラインを閉じる。

var g = new Graphics();
g.beginStroke("#F00")
.moveTo(5,5).lineTo(50,50).lineTo(160,70).closePath()        // 3点を指定して閉じる
.moveTo(75,95).lineTo(40,120).lineTo(150,150).lineTo(140,190).closePath(); // 4点を指定して閉じる

• Canvasのcontextを渡して描画するんだと思う（適当）

• 円を描く。

var g = new Graphics();
g.beginStroke("#F00").setStrokeStyle(15).drawCircle(50, 70, 20);
g.beginFill("#00F").drawCircle(140, 160, 20);

• 楕円を描く。

var g = new Graphics();
g.beginStroke("#F00").drawEllipse(50, 70, 120, 80).endStroke();
g.beginFill("#00F").drawEllipse(140, 60, 20, 60);

• 星っぽいものを描く。
• それぞれのパラメータの効果は下のサンプルで。
• 書き忘れましたが、pointSizeの値を0にすると正多角形になります。

var g = new Graphics();
g.beginStroke("#000").drawPolyStar(50, 50, 30, 5, 0.6, -90);	// 普通の星
g.beginStroke("#F00").drawPolyStar(150, 50, 30, 6, 0.6, -90);	// sidesを増やす
g.beginStroke("#0F0").drawPolyStar(250, 50, 30, 4, 0.6, -90);	// sidesを減らす
g.beginStroke("#CC0").drawPolyStar(350, 50, 30, 5, 0.9, -90);	// pointSizeを増やす
g.beginStroke("#CC0").drawPolyStar(450, 50, 30, 5, 0.3, -90);	// pointSizeを減らす
g.beginStroke("#00F").drawPolyStar(550, 50, 30, 5, 0.6, -30);	// angleを変える

• 角丸の四角形を描く。

var g = new Graphics();
g.beginStroke("#F00").drawRoundRect(50, 50, 120, 60, 15);

• 角の丸みをそれぞれ指定した角丸の四角形を描く。左上、右上、右下、左下の順。

var g = new Graphics();
g.beginStroke("#F00").drawRoundRectComplex(50, 50, 120, 60, 15, 30, 10, 20);

• beginFill系の設定をクリアする。

• beginStroke系の設定をクリアする.

• 引数のRGB値＋透明度から、CSS形式の色指定文字列を取得する。何に使うの？

• 現在の地点から、引数で指定した地点までラインを引く。
• beginStrokeメソッドのサンプル見てください。

• 現在の地点から、引数で指定した地点まで移動する。lineToと違ってラインを引かない。
• beginStrokeメソッドのサンプル見てください。

• 二次曲線を描く。参考→http://www.html5.jp/canvas/ref/method/quadraticCur...

var g = new Graphics();
g.beginFill("#F00").moveTo(10, 10).quadraticCurveTo(100, 180, 150, 20).endFill();
g.beginStroke("#00F").moveTo(10, 180).quadraticCurveTo(100, 30, 190, 80).endStroke();

• 四角形を描く。
• beginFillメソッドのサンプルを見てください。

• ラインのスタイルを設定する。
  • thicknessは線の太さ
  • capsは線の先端　参考→http://www.html5.jp/canvas/ref/property/lineCap.ht...
  • jointsは線の連結部　参考→http://www.html5.jp/canvas/ref/property/lineJoin.h...
  • miterはよくわからない。1を設定すると、jointsにbevelを設定したときみたいになる。それ以外は何も変わらない。

miter <object> Optional. If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped.

var g = new Graphics();
// 線の先が丸くて、連結部が尖ってる線
g.beginStroke("#0F0").setStrokeStyle(15, "round", "miter")
.moveTo(0,0).lineTo(50,50).lineTo(30,170).lineTo(190,70);
// 線の先が角張ってて、連結部が丸い線
g.beginStroke("#00F").setStrokeStyle(20, "square", "round")
.moveTo(150,0).lineTo(190,180).lineTo(80,100).lineTo(130,30);

• Graphicsオブジェクトを文字列化する。"Graphics"という文字列しか返さない。