CreateJS 绘制图形2

来源：互联网发布：js设计模式是什么编辑：程序博客网时间：2024/05/16 08:02

个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf QQ:909648986

EaselJS 绘制图形2

本节将介绍使用Shape对象,绘制椭圆,绘制星形,绘制复杂的带圆角矩形,创造渐变效果,用图片填充绘图.

例子1 绘制椭圆

<!DOCTYPE html><html><head><meta charset="gbk"><script type="text/javascript" src="easeljs-0.6.0.min.js"></script></head><body><canvas id="myCanvas" width="200" height="200">你的浏览器不支持canvas标签</canvas><script>var myCanvas=document.getElementById("myCanvas");var stage=new createjs.Stage(myCanvas);var shape=new createjs.Shape();var graphics=shape.graphics;graphics.beginFill("red");graphics.drawEllipse(5, 5, 60, 120);stage.addChild(shape);stage.update();</script></body></html>

效果显示

graphics.drawEllipse(5, 5, 60, 120);
绘制椭圆,参数一二为定义椭圆的矩形左上角坐标x,y，参数三四为定义椭圆的矩形的宽和高.

例子2 绘制星形

<!DOCTYPE html><html><head><meta charset="gbk"><script type="text/javascript" src="easeljs-0.6.0.min.js"></script></head><body><canvas id="myCanvas" width="200" height="200">你的浏览器不支持canvas标签</canvas><script>var myCanvas=document.getElementById("myCanvas");var stage=new createjs.Stage(myCanvas);var shape=new createjs.Shape();var graphics=shape.graphics;graphics.beginFill("red");graphics.drawPolyStar(50, 50, 40, 5, 0.6, -90);stage.addChild(shape);stage.update();</script></body></html>

效果显示

graphics.drawPolyStar(50, 50, 40, 5, 0.6, -90);
绘制星形,参数一二为星形中心坐标x,y,参数三为星形外半径,参数四为星形的角数量或者多边形的边数,参数五为星形深度,取值范围介于0-1之间,当取0时(没有深度),显示为多边形,当取0时(无限深度),不显示图形,参数六为星形角度.

例子3 绘制复杂的带圆角矩形

<!DOCTYPE html><html><head><meta charset="gbk"><script type="text/javascript" src="easeljs-0.6.0.min.js"></script></head><body><canvas id="myCanvas" width="200" height="200">你的浏览器不支持canvas标签</canvas><script>var myCanvas=document.getElementById("myCanvas");var stage=new createjs.Stage(myCanvas);var shape=new createjs.Shape();var graphics=shape.graphics;graphics.beginFill("red");graphics.drawRoundRectComplex(5, 5, 70, 70, 13, 16, 19, 22);stage.addChild(shape);stage.update();</script></body></html>

效果显示

graphics.drawRoundRectComplex(5, 5, 70, 70, 13, 16, 19, 22);
绘制复杂的带圆角矩形,参数一二为矩形开始坐标，参数三四为矩形的宽和高,参数五,六,七,八,分别是矩形左上角,右上角,右下角,左下角的边角半径.

例子4 创造渐变效果

<!DOCTYPE html><html><head><meta charset="gbk"><script type="text/javascript" src="easeljs-0.6.0.min.js"></script></head><body><canvas id="myCanvas" width="200" height="200">你的浏览器不支持canvas标签</canvas><script>var myCanvas=document.getElementById("myCanvas");var stage=new createjs.Stage(myCanvas);var shape=new createjs.Shape();var graphics=shape.graphics;graphics.beginLinearGradientFill(["blue","red"],[0,1],0,0,100,100);graphics.drawRect(0,0,100,100);graphics.beginRadialGradientFill(["blue","red"],[0,1],150,150,5,150,150,50);graphics.drawRect(100,100,100,100);stage.addChild(shape);stage.update();</script></body></html>

效果显示

graphics.beginLinearGradientFill(["blue","red"],[0,1],0,0,100,100);
开始线形渐变填充模式,参数一为颜色数组,参数二为渐变颜色中的位置数组，取值介于0.0(开始点)到1.0(结束点),参数三,四分别为渐变开始点x,y坐标,参数五,六分别为渐变结束点x,y坐标.

graphics.beginRadialGradientFill(["blue","red"],[0,1],150,150,5,150,150,50);
开始放射状渐变填充模式,参数一为颜色数组,参数二为渐变颜色中的位置数组，取值介于0.0(开始点)到1.0(结束点),参数三,四为开始渐变圆的圆心坐标x,y,参数五为开始渐变圆的圆心半径,参数六,七为结束渐变圆的圆心坐标x,y,参数八为结束渐变圆的圆心半径.

例子5 用图片填充绘图

<!DOCTYPE html><html><head><meta charset="gbk"><script type="text/javascript" src="easeljs-0.6.0.min.js"></script></head><body><canvas id="myCanvas" width="200" height="200">你的浏览器不支持canvas标签</canvas><script>var myCanvas=document.getElementById("myCanvas");var stage=new createjs.Stage(myCanvas);var shape=new createjs.Shape();var graphics=shape.graphics;var img=new Image();img.src="http://img.my.csdn.net/uploads/201304/19/1366342979_9984.png";img.onload=function(){graphics.beginBitmapFill(img);graphics.drawCircle(50,50,50);stage.addChild(shape);stage.update();}</script></body></html>

效果显示

var img=new Image();
img.src="...";
创建一个image对象，并将它的src属性指定一个地址。

img.onload=function(){
...
}
当image对象加载完成后，执行函数。

graphics.beginBitmapFill(img);
开始图片填充模式,参数一为Image对象.