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
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
英文单词 | "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
beginFill()
方法之后添加的直线和曲线应用填充.如果绘制的线条没有闭合, 则自动闭合后再填充.
8.endStroke
9.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
x | 矩形左上角点的x坐标 |
y | 矩形左上角点的y坐标 |
w | 矩形宽度 |
h | 矩形高度 |
11.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
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
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
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
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
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
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);
18.setStrokeStyle
[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
[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
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()设置一个线性渐变线段
参数 参见 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()绘制一条径向渐变的线段(该线段粗细应该粗点儿 不然看不到)
参数 参见 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 : 该图像可以HTMLImageElement|HTMLCanvasElement|HTMLVideoElement
image对象 canvas对象 video对象 必须在填充之前加载好 不然填充将为空
[repeatition=repeat]: String 一个可选参数 重复方式 一个字符串,"repeat" "repeat-x" "repeat-y" "no-repeat" 默认值为"repeat"
26.closePath
注: 该方法在绘制操作结束后调用
27.clear()
clear():Graphics
clear()清除所有绘制命令,重置所有绘制设置,需要重新绘制时需要重新设置填充和描边