首页 > 代码库 > js第三方库CreateJs的使用

js第三方库CreateJs的使用

学习一下使用第三方js库 createjs ,官网 

分开了好几个不同用途的js库: 

EASELJS ,TWEENJS,SOUNDJS,PRELOADJS

同时也还有很多例子可以参考

 

下面使用easeljs这个库

EASELJS:A Javascript library that makes working with the HTML5 Canvas element easy.

使用这个库可以更加方便HTML5的canvas元素

 

使用canvas绘图,可以做出我们想要的各种图形

 1 /** 2  * Created by act262 on 9/20/2014. 3  */ 4  5 /**canvas*/ 6 var canvas; 7 /**canvas上的容器,用于各种操作*/ 8 var stage; 9 10 window.onload = function () {11     //获取canvas对象12     canvas = document.getElementById("myCanvas");13     //创建stage容器14     stage = new createjs.Stage(canvas);15 16 17     drawShape1();18 }19 20 //画图,使用shape类21 function drawShape() {22     //创建一个形状类,这个图形什么都没做23     var shape = new createjs.Shape();24     //现在这个图形开始画画了25     shape.graphics.beginFill("blue")//用指定颜色填充26         .drawRoundRect(100, 100, 200, 200, 10);//画一个圆角矩形,参数:x位置;y位置;长度x;高度y;圆角的弧度27 28     //然后把这个图形添加到容器中29     stage.addChild(shape);30 31     //必须update一下才能正确显示32     stage.update();33 }34 //另外一种方法35 function drawShape1() {36     //创建一个图形类,使用闭包的方法各种设置37     var graphic = new createjs.Graphics().beginFill("red").drawRect(0, 0, 100, 100);38 39     //创建一个特定图形的形状40     var shape = new createjs.Shape(graphic);41 42     stage.addChild(shape);43     stage.update();44 }

效果显示如下

shape类是一个矢量图形类,其中一个属性graphics可以绘制各种图形

尝试各种形状

//创建一个图形类,使用闭包的方法各种设置    var graphic = new createjs.Graphics().beginFill("red").drawRect(0, 0, 200, 200);    //创建一个特定图形的形状    var shape = new createjs.Shape(graphic);    shape.x = 200; //形状的起始点    shape.y = 200;    //添加一个图形,叠加在以前的图形上    shape.graphics.beginStroke("blue")//画边框        .beginFill("green").        drawCircle(200, 200, 100); //画圆 中心点位置x,y;半径    //改变透明度,改变将影响全部的图形    shape.alpha = 0.5;    shape.graphics.beginStroke("black")        .beginFill("yellow").drawRect(200, 0, 200, 200);    //画椭圆    shape.graphics.beginFill("gray")        .setStrokeStyle(10) //边框的厚度        .drawEllipse(125, 400, 150, 100); //椭圆的最左端位置x,y;长度,高度    //绘制多边形    shape.graphics        .setStrokeStyle(1)        .drawPolyStar(0, 600, 100, 6, 0.3, -90);//图形中心位置x,y;半径,n边形;每个角的粗细程度(0~1);旋转角度    //绘制四个角可以不同的圆角矩形    shape.graphics.beginFill(null)        .drawRoundRectComplex(200, 500, 200, 200, 50, 40, 20, 10); //顶点的位置x,y;长,宽;左上角,右上角;右下角;左下角    //绘制直线    shape.graphics.moveTo(-2, 0) //首先要有个起始点        .lineTo(-2, 600) //画到终点的直线        .moveTo(0, -2)        .lineTo(600, -2)    //绘制抛物线    shape.graphics        .moveTo(0, 300) //起始点        .quadraticCurveTo(10, 20, 200, 300); //cx,cy曲线控制;x,y终点

 

js第三方库CreateJs的使用