Html 5ゲームフレームワークcreateJsコンポーネント--EaselJS(二)図形描画クラスgraphics
21701 ワード
端友は私にドキュメントがあるかどうかを聞いて、確かにありますが、中国語がなくて、英語しかありません.まず閲覧住所を提供して、createJs英語ドキュメントを参考にして勉強します.EaselJSは主にcreateJsコンポーネントでcanvasの描画を制御しているので、密接に関連する描画操作に関連しています.描画操作はGraphicsクラスで実現されています.Graphicsクラスを詳しく研究してみましょう.まずEaselJS(奥の丸い絵):
わかりました.上書きの問題は、キャンバスに追加する順番です.container.です.addChild()またはstage.addChild()の前後順.
グラフィックを描くときにgraphicsクラスをどのように利用するかが明らかになります.Graphicsクラスには2つの比較的興味深い特性があり,チェーン操作と簡略化方法がある.チェーン操作.Graphicsクラスのすべての描画方法はgraphicsインスタンスを返すため、チェーン操作を使用できます.graphicsクラスについては、公式サイトでも簡単に書く方法があります(公式ドキュメントは「Tiny API」と呼ばれています).すべての書き方はprotectedメソッドとして定義されており、圧縮ドキュメントを作成する際に役立ちます.
mt
moveTo
lt
lineTo
a/at
arc / arcTo
bt
bezierCurveTo
qt
quadraticCurveTo (also curveTo)
r
rect
cp
closePath
c
clear
f
beginFill
lf
beginLinearGradientFill
rf
beginRadialGradientFill
bf
beginBitmapFill
ef
endFill
ss
setStrokeStyle
s
beginStroke
ls
beginLinearGradientStroke
rs
beginRadialGradientStroke
bs
beginBitmapStroke
es
endStroke
dr
drawRect
rr
drawRoundRect
rc
drawRoundRectComplex
dc
drawCircle
de
drawEllipse
dp
drawPolyStar
p
decodePath
書き方を使うと、以下のように便利です(上手でない人は略さないことをお勧めしますが、略さずに印象を深めたほうがいいのではないでしょうか).
例:graphicsクラスオブジェクトを使用して、顔を描きます.
最後にcircleについてお話しします.drawCircle(x,y,radius),circle.x,circle.y間の関係(混同されやすい場合がある):
パートナーが私にグラデーションを設定する方法を尋ねたことを考慮します.
テキストの改行を設定:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* body{margin:0}*/
#canvas{border:1px solid #ccc}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"> canvas ， 。</canvas>
<script type="text/javascript" src='http://cdn.staticfile.org/EaselJS/0.7.1/easeljs.min.js'></script>
<script type="text/javascript" src='preloadjs-0.4.1.combined.js'></script>
<script type="text/javascript">
onload=function(){
init();
}
function init(){
var stage=new createjs.Stage('canvas');
//
var container=new createjs.Container();
var circle=new createjs.Shape(),squra=new createjs.Shape(),arcY=new createjs.Shape();
// drawCircle
circle.graphics.beginFill('red').drawCircle(0,0,50);
circle.x=circle.y=100;
// ，Graphics this
squra.graphics.beginFill('blue').drawRect(0,0,100,100).endFill();
circle.graphics.endFill();
//
arcY.graphics.beginFill('green').arc(200,100,80,60,2*Math.PI).endFill();
//container
container.addChild(arcY);
container.addChild(circle);
container.addChild(squra);
stage.addChild(container);
stage.update();
}
</script>
</body>
</html>わかりました.上書きの問題は、キャンバスに追加する順番です.container.です.addChild()またはstage.addChild()の前後順.
グラフィックを描くときにgraphicsクラスをどのように利用するかが明らかになります.Graphicsクラスには2つの比較的興味深い特性があり,チェーン操作と簡略化方法がある.チェーン操作.Graphicsクラスのすべての描画方法はgraphicsインスタンスを返すため、チェーン操作を使用できます.graphicsクラスについては、公式サイトでも簡単に書く方法があります(公式ドキュメントは「Tiny API」と呼ばれています).すべての書き方はprotectedメソッドとして定義されており、圧縮ドキュメントを作成する際に役立ちます.
mt
moveTo
lt
lineTo
a/at
arc / arcTo
bt
bezierCurveTo
qt
quadraticCurveTo (also curveTo)
r
rect
cp
closePath
c
clear
f
beginFill
lf
beginLinearGradientFill
rf
beginRadialGradientFill
bf
beginBitmapFill
ef
endFill
ss
setStrokeStyle
s
beginStroke
ls
beginLinearGradientStroke
rs
beginRadialGradientStroke
bs
beginBitmapStroke
es
endStroke
dr
drawRect
rr
drawRoundRect
rc
drawRoundRectComplex
dc
drawCircle
de
drawEllipse
dp
drawPolyStar
p
decodePath
書き方を使うと、以下のように便利です(上手でない人は略さないことをお勧めしますが、略さずに印象を深めたほうがいいのではないでしょうか).
squra.graphics.f('blue').dr(0,0,100,100).ef();例:graphicsクラスオブジェクトを使用して、顔を描きます.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* body{margin:0}*/
#canvas{border:1px solid #ccc}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"> canvas ， 。</canvas>
<script type="text/javascript" src='http://cdn.staticfile.org/EaselJS/0.7.1/easeljs.min.js'></script>
<script type="text/javascript">
onload=function(){
init();
}
function init(){
var stage=new createjs.Stage('canvas'),
container=new createjs.Container();
//
var cricle=new createjs.Shape();
cricle.graphics.beginFill("orange").drawCircle(0,0,100).endFill();
cricle.x=300;
cricle.y=240;
container.addChild(cricle);
//
var eye=new createjs.Shape();
//drawEllipse ( x y w h ) ,x y ，w ，h
eye.graphics.beginFill("rgba(0,0,20,.5)").drawEllipse(0,0,40,20).endFill();
//
eye.x=240;
eye.y=180;
container.addChild(eye);
// ，
var eye1=new createjs.Shape();
eye1.graphics.beginFill("rgba(0,0,20,.5)").drawEllipse(0,0,40,20).endFill('orange');
eye1.x=320;
eye1.y=180;
container.addChild(eye1);
//
var nose=new createjs.Shape();
nose.graphics.beginFill("rgba(0,0,20,.5)").drawCircle(0,0,10).endFill();
nose.x=300;
nose.y=250;
container.addChild(nose);
//
var mouth=new createjs.Shape();
//setStrokeStyle ( thickness [caps=0] [joints=0] [miterLimit=10] [ignoreScale=false] )
//thickness ，caps 0 ，1 ，2
mouth.graphics.setStrokeStyle(8,"round").beginStroke("mouth").arc(0,0,100,Math.PI*60/180,Math.PI*120/180).endFill();
mouth.x=300;
mouth.y=200;
container.addChild(mouth);
stage.addChild(container);
stage.update();
}
</script>
</body>
</html>最後にcircleについてお話しします.drawCircle(x,y,radius),circle.x,circle.y間の関係(混同されやすい場合がある):
//circle.drawCircle(x,y,radius),circle.x,circle.y
// circle.drawCircle(0,0,100)， (0,0), 100
// circle.drawCircle(0,0,100)，circle.x=100,circle.y=100 (100,100), 100 ，circle.x circle.y, x,y
// ， circle.drawCircle(10,10,100)，circle.x=100,circle.y=100， (110,110), 100
cricle.graphics.beginFill("orange").drawCircle(0,0,100).endFill();
cricle.x=300;
cricle.y=240;パートナーが私にグラデーションを設定する方法を尋ねたことを考慮します.
var g = new createjs.Shape();
g.graphics.beginLinearGradientFill(["#000","#FFF","red"], [0, 0.8,1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);
container.addChild(g);テキストの改行を設定:
var text = new createjs.Text("Hello
World ", "20px Arial", "#ff7700");
text.x = 200;
text.y = 300;
text.textBaseline = "alphabetic";
container.addChild(text);