CreateJs教程5章：easeljs中的图形Shape绘制

createjs主要是创建类似flash一样的动画的，创建动画必要先要有图形/形状，我们会将动画放在图形上，这样图形就能够运动起来了。

createjs.Shape创建形状

网页中有时候需要一些形状，如一朵小红花，一个笑脸，这时候就可以使用createjs的Shape对象，来创建形状,如下图：

createjs.Shape形状

这也是本课将讲解的案例，很多同学想知道老师长得有多帅，上面那幅图就是老师了的照片了，是不是很可爱啊。

createjs.Shape的原型

Shape是一个显示内容的对象，它包含了一个graphics对象，这个对象负责绘制图形。graphics包含了很多绘制图形的函数。

createjs.Shape的原型如下：

Shape ( graphics )
  • graphics参数是要显示的图像的实例，如果不传这个参数，那么会生成一个新的图形的实例。graphics负责绘制图形，很多绘制函数都在graphics中定义。

graphics绘制笑脸

一个笑脸由如下几部分组成：

  • 圆形的头，用drawCircle函数画圆
  • 一张嘴，用弧形arc来绘制
  • 2只眼睛，用drawCircle来绘制

drawSmiley就是我们封装的一个函数，这个函数就是用来绘制笑脸的，具体细节请大家认真看注释哦：

function drawSmiley() {
    // 创建一个形状对象
    var s = new createjs.Shape();
    // 获取形状中的图形对象graphics
    var g = s.graphics;

    // 绘制头部，笔触大小为10
    g.setStrokeStyle(10, 'round', 'round');
    // 笔触的颜色为黑色（#000）
    g.beginStroke("#000");
    g.beginFill("#FC0");
    g.drawCircle(0, 0, 100); //55,53

    //Mouth
    g.beginFill(); // no fill
    g.arc(0, 0, 60, 0, Math.PI);

    //Right eye
    g.beginStroke(); // no stroke
    g.beginFill("#000");
    g.drawCircle(-30, -30, 15);

    //Left eye
    g.drawCircle(30, -30, 15);

    return s;
}

下面对drawSmiley这个函数涉及到的知识介绍如下，同学们把下面的知识学了之后，反过来，看drawSmiley这个函数，一定会有更多收获哦。

createjs中的graphics类介绍

graphics是图形类，图形类提供了很多矢量绘图函数，如绘制直线、圆形、弧形。

graphics有很多函数，这里，我们本课代码中使用的函数一一解释：

createjs设置画笔的笔触Stroke

画笔的笔触就像笔的粗细，如毛笔比圆珠笔粗，用来绘制边框的粗细和颜色，笔触也包含绘制的颜色等属性，setStrokeStyle函数用于设置笔触，其原型如下：

setStrokeStyle （ thickness  [caps=0]  [joints=0]  [miterLimit=10]  [ignoreScale=false] ）

setStrokeStyle是graphics类的函数，其个参数含义为：

  • thickness：一个数字，表示笔触的宽度
  • [caps=0]：可选参数，caps表示2条线之间连接处，用什么形状连接起来，0表示直接对接，1表示用圆形对接，2表示正方形
  • [joints=0]
  • [miterLimit=10] :

https://www.createjs.com/docs/easeljs/classes/Graphics.html#method_setStrokeStyle

开始笔触beginStroke

beginStroke 设置笔触的颜色，并开始一个笔触，不调用这个函数，边框就不会被绘制：

beginStroke ( color ) Graphics

其参数和返回值含义为：

  • color: 笔触的颜色，如#FF0000、red、rgba(255,0,0,0.5)，这3种表示方式都是可以的
  • Graphics：返回值是当前的Graphics对象，这是为了级联调用返回的

与beginStroke对应的函数是endStroke ()，表示结束一个笔触

endStroke () Graphics
  • Graphics：返回值是当前的Graphics对象，这是为了级联调用返回的

笔触的效果demo：

createjs开始笔触

开始填充颜色beginFill

beginFill用指定的颜色做一个填充，endFill表示停止填充，其原型为：

beginFill ( color ) Graphics

beginFill的参数及返回值含义为：

  • color: 填充的颜色，如#FF0000、red、rgba(255,0,0,0.5)，这3种表示方式都是可以的
  • Graphics：返回值是当前的Graphics对象，这是为了级联调用返回的

使用beginFill填充：

createjs打开填充关闭填充beginfill

createjs绘制圆形函数drawCircle

drawCircle ( x  y  radius ) Graphics

其参数含义为：

  • x: 圆心x坐标
  • y: 圆心y坐标
  • radius：圆的半径

举个例子：

g.setStrokeStyle(1, 'round', 'round');
g.beginStroke("#000");
g.drawCircle(0, 0, 100);
g.endStroke()

createjs中的drawCircle函数：

createjs中的drawCircle函数

createjs绘制弧形函数arc

arc用于绘制弧形，弧形是是未封闭的圆，其原型如下：

arc ( x  y  radius  startAngle  endAngle  anticlockwise ) Graphics

结合下图来说明各个参数：

createjs-arc函数

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

弧度不是圆，所以结束角度减去开始角不是360度。

下面的代码绘制了一个中心点为(100,100),半径为20，开始角为0，结束角为Math.PI*1.5的。

arc(100, 100, 100, 0, Math.PI*1.5);

绘制弧形demo：

createjs-arc函数