createjs中的Graphics

createjs中的Graphics 和 flash ActionScript中的Graphics 基本类似 今天我们就来好好剖析一下它

先来看下Graphics的定义:

Graphics 类包含一组可用来创建矢量形状的方法。 支持绘制的显示对象 Shape 对象。 Shape 类中包括 graphics 属性，该属性是一个 Graphics 对象。 以下是为便于使用而提供的一些辅助函数：drawRect()、drawRoundRect()、drawCircle() 和 drawEllipse()。

1.arc

arc(x,y,radius,startAngle,endAngle,anticlockwise):Graphics

arc()方法创建弧/曲线(用于创建圆或部分圆)

参数

x	圆弧的中心x坐标
y	圆弧的中心y坐标
radius	圆弧的半径
startAngle	起始角 以弧度计. (弧的圆形的三点钟位置是0度)
endAngle	结束角 以弧度计
anticlockwise	是逆时针还是顺时针 false:顺时针 (默认值),true:逆时针

 

 

请结合下图理解

 

 

 下面代码创建一个半圆:

var shap = new createjs.Shape();
shap.graphics.beginFill("#ff0000");
shap.graphics.arc(100, 100, 20, 0, Math.PI);
shap.graphics.endFill();
stage.addChild(shap);

效果如下:

 

 

tip:使用arc()创建圆,请把startAngle设置为0 , endAngle设置为Math.PI * 2;

 

2.arcTo

arcTo(x1,y1,x2,y2,radius):Graphics

arcTo() 方法创建介于两个切线之间的弧/曲线.

参数

x1	弧的起点的 x 坐标
y1	弧的起点的 y 坐标
x2	弧的终点的 x 坐标
y2	弧的终点的 y 坐标
radius	弧的半径

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");
    shap.graphics.moveTo(20,20);           // 创建开始点
    shap.graphics.lineTo(100,20);          // 创建水平线
    shap.graphics.arcTo(150,20,150,70,30); // 创建弧
    shap.graphics.lineTo(150,100);
    shap.graphics.endStroke();
    stage.addChild(shap);

注:完全不知道干嘛用的 23333

3.beginFill

beginFill(color):Graphics;

beginFill()表示开始填充一种单一颜色,除非遇到endFill()方法 或是 新的beginFill()方法 或其他填充方法,否则该填充效果将会一直有效.

参数 

color: 颜色值 

一个字符串形式的颜色值,可以设置的类型如下:

英文单词	"red"
十六进制	"#ff0000"
rgb	"rgb(255,0,0)"
rgba	"rgba(255,0,0,0.1)"

tip:该方法因和endFill()成对出现

tip: 基本来说createjs中遇到的颜色值的设置都是如此

4.beginStroke

beginStroke(color):Graphics;

beginStroke() 指定绘制线条的样式(颜色)

参数:

color 线条颜色 可设置的类型和beginFill的参数color一样

5.moveTo

moveTo(x,y):Graphics;

moveTo()将绘制位置调整到点(x,y)处

参数

x	绘制点x坐标
y	绘制点y坐标

6.lineTo

lineTo(x,y):Graphics;

lineTo()从当前点绘制一条直线到点(x,y)

x	绘制点x坐标
y	绘制点y坐标

7.endFill

endFill():Graphics;

endFill() 对从上一次调用beginFill()方法之后添加的直线和曲线应用填充.如果绘制的线条没有闭合, 则自动闭合后再填充.

8.endStroke

endStroke():Graphics;

endStroke()停止线条绘制

9.rect

rect(x,y,w,h):Graphics

rect() 绘制一个矩形

参数

x	矩形左上角点的x坐标
y	矩形左上角点的y坐标
w	矩形宽度
h	矩形高度

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");           //边框线颜色为#ff0000红色
    shap.graphics.drawRect(100,100,40,80);          //在点100,100处绘制一个宽40 高80的矩形 
    shap.graphics.endStroke();
    stage.addChild(shap);

10.drawRect

drawRect(x,y,w,h):Graphics

drawRect()和上面的rect() 用法相同 都是绘制 一个矩形(完全不知道为啥要设置)

参数

x	矩形左上角点的x坐标
y	矩形左上角点的y坐标
w	矩形宽度
h	矩形高度

11.drawRoundRect

drawRoundRect(x,y,w,h,radius):Graphics

drawRoundRect()绘制一个圆角矩形

参数

x	圆角矩形左上角点的x坐标
y	圆角矩形左上角点的y坐标
w	圆角矩形宽度
h	圆角矩形高度
radius	圆角矩形的圆角半径

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");                   //线条颜色为#ff0000红色
    shap.graphics.drawRoundRect(100,100,40,80,10);          //在点100,100处绘制一个宽40 高80 圆角半径为10的圆角矩形 
    shap.graphics.endStroke();
    stage.addChild(shap);

12.drawRoundRectComplex

drawRoundRectComplex(x,y,w,h,radiusTL,radiusTR,radiusBL,radiusBR):Graphics

drawRoundRectComplex()绘制一个圆角矩形 此圆角矩形的四个角可以拥有不同 的圆角半径

参数

x	圆角矩形左上角点的x坐标
y	圆角矩形左上角点的y坐标
w	圆角矩形宽度
h	圆角矩形高度
radiusTL	圆角矩形的左上角圆角半径
radiusTR	圆角矩形的右上角圆角半径
radiusBL	圆角矩形的左下角圆角半径
radiusBR	圆角矩形的右下角圆角半径

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");                                    //线条颜色为#ff0000红色
    shap.graphics.drawRoundRectComplex(100,100,80,160,10,20,30,40);          //在点100,100处绘制一个宽40 高80 圆角半径依次为10,20,30,40的圆角矩形 
    shap.graphics.endStroke();
    stage.addChild(shap);

13.drawCircle

drawCircle(x,y,radius):Graphics

drawCircle()绘制一个圆心为(x,y),半径为radius的圆形

参数

x	圆心点x坐标
y	圆心点y坐标
radius	圆的半径

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");          //线条颜色为#ff0000红色
    shap.graphics.drawCircle(100,100,100)          //在点100,100处绘制一个半径为100的圆
    shap.graphics.endStroke();
    stage.addChild(shap);

14.drawEllipse

drawEllipse(x,y,w,h):Graphics

drawEllipse()绘制一个 左上角坐标(x,y),宽w,高h 的椭圆形.如果w=h 则绘制的将是一个圆形

参数

x	椭圆左上角x坐标
y	椭圆左上角y坐标
w	椭圆宽度
h	椭圆高度

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");              //线条颜色为#ff0000红色
    shap.graphics.drawEllipse(100,100,50,100)          //在点100,100处绘制一个宽50高100的椭圆
    shap.graphics.endStroke();
    stage.addChild(shap);

15.drawPolyStar

drawPolyStar(x,y,radius,sides,pointSize,angle):Graphics

drawPolyStar()绘制一个多变形

参数

x	正多边形(星形)的中心点x坐标
y	正多边形(星形)的中心点y坐标
radius	正多边形(星形)所在的外切圆的半径
sides	正多边形(星形)的边数(角数)
pointSize	角的深度 0:正多边形 0~1:多角星
angle	第一个点/角的角度,例如,值为0时表示在中心点的右侧开始绘制第一个点

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");                    //线条颜色为#ff0000红色
    shap.graphics.drawPolyStar(100,100,100,5,0.5,0)          //在点100,100处绘制一个外切圆半径为100的五角星
    shap.graphics.endStroke();
    stage.addChild(shap);

16.bezierCurveTo

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y):Graphics

bezierCurveTo()绘制贝塞尔曲线

参数

cp1x	贝塞尔曲线起点x坐标
cp1y	贝塞尔曲线起点y坐标
cp2x	贝塞尔曲线控制点x坐标
cp2y	贝塞尔曲线控制点y坐标
x	贝塞尔曲线终点x坐标
y	贝塞尔曲线终点y坐标

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");                    //线条颜色为#ff0000红色
    shap.graphics.bezierCurveTo(10,10,110,10,110,110)        //按起点 10,10 终点 110,110 控制点 110,10 绘制贝塞尔曲线
    shap.graphics.endStroke();
    stage.addChild(shap);

17.quadraticCurveTo

quadraticCurveTo(cpx,cpy,x,y):Graphics

quadraticCurveTo()使用控制点（cpx，cpy）绘制从当前绘图点到（x，y）的二次曲线。

该方法和bezierCurveTo()方法类似,只是bezierCurveTo方法起点由自己的参数决定,而quadraticCurveTo的起点为当前的绘制点(控制点的位置一般由moveTo()  lineTo控制) 

参数

cpx	贝塞尔曲线控制点x坐标
cpy	贝塞尔曲线控制点y坐标
x	贝塞尔曲线终点x坐标
y	贝塞尔曲线终点y坐标

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");                 //线条颜色为#ff0000红色
    shap.graphics.moveTo(10,10);                          //将控制点移到点10,10的位置
    shap.graphics.quadraticCurveTo(110,10,110,110)        //按起点 10,10 终点 110,110 控制点 110,10 绘制贝塞尔曲线
    shap.graphics.endStroke();
    stage.addChild(shap);

注:若直接调用该方法会出现错误,因为不晓得的控制点的位置(这里并不像ActionScript中一样默认控制点为(0,0)) 这里必须手动调整控制点的位置

18.setStrokeStyle

setStrokeStyle(thickness,[caps=0],[joins=0],[miterLimit=0],[ignoreScale=false]):Graphics

setStrokeStyle()设置线条样式

参数

thickness: 线条的粗细程序 

[caps=0]:线条末端处端点类型  默认值为 没有端点 "butt" 或数字 0

没有端点 : "butt"  或 数字 0

圆形端点 : "round" 或 数字 1

方形端点 : "square"或 数字 2

下面两种设置方法都是将端点的类型设置为圆形

    shap.graphics.setStrokeStyle(1,["round"])
    shap.graphics.setStrokeStyle(1,[1])

[joints=0]:指定用于拐角的连接外观的类型 默认 尖角 "miter" 或数字0 

尖角 : "miter" 或 数字 0

圆角 : "round" 或 数字 1

斜角 : "bevel" 或 数字 2

下面两种设置方法都是将拐角的连接类型设置成圆角

    shap.graphics.setStrokeStyle(20,[1],["round"])
    shap.graphics.setStrokeStyle(20,[1],[1])

[miterlimit=10]: 一个表示将在哪个限制位置切断尖角的数字。 有效值的范围是 1 到 255（超出该范围的值将舍入为 1 或 255） 此值只可用于 joints  设置为 "miter" 的情况下

ignoreScale:是否忽略缩放对线条粗细的影响  默认 false

true:忽略缩放对线条粗细的影响 始终使用同一种笔刷进行绘制

false:缩放会对线条粗细产生影响

19.setStrokeDash

setStrokeDash([segments],[offset=0]):Graphics

setStrokeDash()设置线段以虚线的形式显示

[segments]: 指定虚线模式的数组,链接和空隙之间交替出现的形式,例如[20,10]表示先绘制一条20像素的线段,再空10像素间隔,再绘制20像素的线段,再空10像素间隔,以此类推.设置一个null值 或一个 空数组将清除线段的虚线模式

[offset]: 虚线的偏移量 可以利用这个属性 来制作蚂蚁线效果

    var shap = new createjs.Shape();
    shap.graphics.beginStroke("#ff0000");                 //线条颜色为#ff0000红色
    shap.graphics.setStrokeStyle(1)
    shap.graphics.setStrokeDash([20, 10], 10)             
    shap.graphics.moveTo(10,50);                          
    shap.graphics.lineTo(100,50);
    shap.graphics.lineTo(10,100);
    shap.graphics.endStroke();
    stage.addChild(shap);

20.beginLinearGradientFill

beginLinearGradientFill(color,radios,x0,y0,x1,y1):Graphics

beginLinearGradientFill()从点(x0,y0)到(x1,y1)的线性渐变填充

colors : 一个颜色值数组,用来表示渐变的颜色,对于每一个颜色,请确保在radios中存在相应的值

radios : 一个颜色分布比例的数组,有效值为0到1,例如，[0.1，0.9]会将第一个颜色绘制为10％，然后在90％处插值到第二个颜色。

x0,y0,x1,y1 : 定义了从点(x0,y0)到点(x1,y1)之间的渐变

下面的例子就是 绘制一个从点(10,10)到点(110,110)的渐变,并将渐变填充到矩形内

    var shap = new createjs.Shape();
    shap.graphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 10, 10, 110, 110)
    shap.graphics.drawRect(10, 10, 110, 110);
    stage.addChild(shap);

21.beginRadialGradientFill

beginRadialGradientFill(colors,ratios,x0,y0,r0,x1,y1,r1):Graphics

beginRadialGradientFill()径向渐变

colors : 一个颜色值数组,用来表示渐变的颜色,对于每一个颜色,请确保在radios中存在相应的值

radios : 一个颜色分布比例的数组,有效值为0到1,例如，[0.1，0.9]会将第一个颜色绘制为10％，然后在90％处插值到第二个颜色。

x0,y0,r0 : 定义渐变的内圆

x1,y1,r1 : 定义渐变的外圆

下面的例子 定义了一个以(100,100)为中心,半径为50的红色到蓝色的径向渐变,并绘制一个圆来显示

    var shap = new createjs.Shape();
    shap.graphics.beginRadialGradientFill(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)
    shap.graphics.drawCircle(100, 100, 50);
    shap.graphics.endFill();
    stage.addChild(shap);

22.beginBitmapFill

beginBitmapFill(image,repetition,matrix):Graphics

beginBitmapFill()开始使用指定的图像填充

image : 该图像可以HTMLImageElement|HTMLCanvasElement|HTMLVideoElement

image对象 canvas对象 video对象 必须在填充之前加载好 不然填充将为空

repetition : 一个可选参数 重复方式 一个字符串,"repeat" "repeat-x" "repeat-y" "no-repeat"  默认值为"repeat"

matrix : Matrix2D 一个可选参数 指定位图填充的转换矩阵

23.beginLinearGradientStroke

beginLinearGradientStroke(colors,ratios,x0,y0,x1,y1):Graphics

beginLinearGradientStroke()设置一个线性渐变线段 

参数 参见 beginLinearGradientFill方法

下面 创建一个 黑白线性渐变的矩形

    var shap = new createjs.Shape();
    shap.graphics.beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120);
    shap.graphics.drawRect(20, 20, 100,100);
    shap.graphics.endFill();
    stage.addChild(shap);

24.beginRadialGradientStroke

beginRadialGradientStroke(colors,ratiols,x0,y0,r0,x1,y1,r1):Graphics

beginRadialGradientStroke()绘制一条径向渐变的线段(该线段粗细应该粗点儿 不然看不到)

参数 参见 beginRadialGradientFill方法

    var shap = new createjs.Shape();
    shap.graphics.setStrokeStyle(10)
    shap.graphics.beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)
    shap.graphics.drawRect(50, 90, 150, 110);
    shap.graphics.endStroke();
    stage.addChild(shap);

25.beginBitmapStroke

beginBitmapStroke(image,[repetition = repeat]):Graphics

beginBitmapStroke()使用图案绘制线条

参数

image : 该图像可以HTMLImageElement|HTMLCanvasElement|HTMLVideoElement

image对象 canvas对象 video对象 必须在填充之前加载好 不然填充将为空

[repeatition=repeat]: String 一个可选参数 重复方式 一个字符串,"repeat" "repeat-x" "repeat-y" "no-repeat"  默认值为"repeat"

26.closePath

closePath():Graphics

closePath() 闭合绘制的线条,该方法会将没有封闭的图形,自动封上

对于填充来说,closePath()有没有没啥区别.

看下面的图像就能明白了 上面的是使用closePath()方法的 

注: 该方法在绘制操作结束后调用

27.clear()

clear():Graphics

clear()清除所有绘制命令,重置所有绘制设置,需要重新绘制时需要重新设置填充和描边