canvas要素は、HTMLのbodyに記述するもの。HTML5の規格。id=”キャンバス名”を付けることができ、このキャンバス名(id)を最初にcreatejs.Stage(“キャンバス名”)で指定することで、そのキャンバスを使うことができる。canvasにはwidth=”” height=””で幅を指定する。CSSでも可能だができない場合はインラインに書くことが推奨されている。
createjs.Shape()で丸や四角が入るオブジェクトを作る。つまりステージの下につけるための箱のようなもの。–.graphics.—-ここにbeginFill(“色”),drawCircle()等で図形を加えていく。
最後にステージオブジェクトに追加する。ステージオブジェクト.addChild(シェイプオブジェクト) で、再描画はステージオブジェクト.Update()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/base.css"> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>//createJSの読み込み <script> window.addEventListener("load", init);//loadしたらfunction init()を起動 function init() { // Stageオブジェクトを作成。表示リストのルートになります。 var stage = new createjs.Stage("myCanvas"); // シェイプを作成 var shape = new createjs.Shape(); // shape.graphics.----シェイプに、塗りの色を指定 shape.graphics.beginFill("DarkRed"); // 円を描く shape.graphics.drawCircle(0, 0, 80); //最後にstageに作ってきたshapeを追加する。追加してから、xyを指定する？ //updateよりも前なら、addChildした後でも前でも良い。 stage.addChild(shape); // 表示リストに追加 // 配置座標を設定 shape.x = 200; shape.y = 100; // Stageの描画を更新 stage.update(); } </script> </head> <body> <canvas id="myCanvas" width="640" height="200"></canvas> </body> </html> |
1 comment