ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

CreateJS でのシェイプの塗りと線の設定方法

シェイプには塗りと枠線を設定できます。塗りだけを設定したり、線だけを描いて塗らないということも可能です。

塗り

塗りというのは図形に囲まれた領域となります。beginFill()メソッドで塗りの色を指定します。

書式

Graphicsオブジェクト.beginFill(塗りの色);
Graphicsオブジェクト.endFill();

サンプル

// シェイプを作成
var shape = new createjs.Shape();
// 塗りの色を指定
shape.graphics.beginFill("DarkRed");
// 円を描く
shape.graphics.drawCircle(0, 0, 80);

※詳しい使い方は「公式ドキュメント(英語)」を確認ください。

コラム

図形を描いたらendFill()メソッドで描き終わったことを指定します。必ずしも使わなくても大丈夫ですが、複数のシェイプを描くときには指定しておくほうが無難でしょう。

線とは図形の境界線のことです。setStrokeStyle()メソッドで線の太さを、beginStroke()メソッドで線の色を設定することができます。

書式

Graphicsオブジェクト.beginFill(塗りの色);
Graphicsオブジェクト.setStrokeStyle(線の太さ);

サンプル

// シェイプを作成
var shape = new createjs.Shape();
// 線の色を指定
shape.graphics.beginStroke("DarkRed");
// 線の幅を指定
shape.graphics.setStrokeStyle(5);
// 円を描く
shape.graphics.drawCircle(0, 0, 80);

※詳しい使い方は「 公式ドキュメント(英語)」のbeginStroke()setStrokeStyle()を確認ください。

コラム

図形を描いたらendStroke()メソッドで描き終わったことを指定します。必ずしも使わなくても大丈夫ですが、複数のシェイプを描くときには指定しておくほうが無難でしょう。

次の記事へ