CreateJS自学教程基础 - 创建简单的图形

在上一章（ CreateJS自学教程 - 场景的创建） 我们讨论了如何使用CreateJS来创建一个场景，并且在场景上添加了一个“Hello World”文本，这次我们来研究如何创建简单的图形。图形是游戏的重要组成部分，CreateJS对原生Canvas的作图接口进行封装，使他们对开发 者更加友好，更易于使用，下面我们来看一个示例，首先看一下效果图：

2013-4-17 20:09 上传
下载附件 (17.03 KB)


实现的代码：

  1. var s = new createjs.Shape();
  2. var g = s.graphics;

  4. //头
  5. g.setStrokeStyle(15, 'round', 'round');
  6. g.beginStroke("#000");
  7. g.beginFill("#F00");
  8. g.drawCircle(170, 170, 170); //55,53
  9. g.endFill();
  10. g.setStrokeStyle(1, 'round', 'round');

  12. //云软件：www.misoft.com.cn
  13. //右眼
  14. g.setStrokeStyle(5, 'round', 'round');
  15. g.beginStroke("#000");
  16. g.beginFill("#000");
  17. g.drawRoundRect(125, 64, 20, 50, 10);
  18. g.endFill();

  20. //左眼
  21. g.setStrokeStyle(5, 'round', 'round');
  22. g.beginStroke("#000");
  23. g.beginFill("#000");
  24. g.drawRoundRect(200, 64, 20, 50, 10);
  25. g.endFill();

  27. //嘴巴
  28. g.setStrokeStyle(15, 'round', 'round');
  29. g.beginStroke("#000");
  30. g.moveTo(45, 155);
  31. g.bezierCurveTo(83, 307, 254, 317, 296, 152);

  33. // 创建场景，并把笑脸画在场景上
  34. var myCanvas = new Canvas();
  35. var myStage = new createjs.Stage(myCanvas);
  36. s.x = 50;
  37. s.y = 50;
  38. myStage.addChild(s);
  39. myStage.update();
复制代码

简化代码如下:

  1. var s = new createjs.Shape();
  2. var g = s.graphics;

  4. //头
  5. g.setStrokeStyle(15, 'round', 'round').beginStroke("#000").beginFill("#F00").drawCircle(170, 170, 170).endFill().setStrokeStyle(1, 'round', 'round');

  7. //右眼
  8. g.setStrokeStyle(5, 'round', 'round').beginStroke("#000").beginFill("#000").drawRoundRect(125, 64, 20, 50, 10).endFill();

  10. //左眼
  11. g.setStrokeStyle(5, 'round', 'round').beginStroke("#000").beginFill("#000").drawRoundRect(200, 64, 20, 50, 10).endFill();

  13. //嘴巴
  14. g.setStrokeStyle(15, 'round', 'round').beginStroke("#000").moveTo(45, 155).bezierCurveTo(83, 307, 254, 317, 296, 152);

  16. // 创建场景，并把笑脸画在场景上
  17. var myCanvas = new Canvas();
  18. var myStage = new createjs.Stage(myCanvas);
  19. s.x = 50;
  20. s.y = 50;
  21. myStage.addChild(s);
  22. myStage.update();
复制代码

CreateJS提供了链式调用的方法，当然，为了压缩代码，你可以把上面几个作图语句连在一起。这样仍然没有达到压缩代码的要求，我们再简化一下：

b

  1. var s = new createjs.Shape();
  2. var g = s.graphics;
  3.         
  4. //头
  5. g.ss(15, 'round', 'round').s("#000").f("#F00").dc(170, 170, 170).ef().ss(1, 'round', 'round');
  6.         
  7. //右眼
  8. g.ss(5, 'round', 'round').s("#000").f("#000").rr(125, 64, 20, 50, 10).ef();
  9.         
  10. //左眼
  11. g.ss(5, 'round', 'round').s("#000").f("#000").rr(200, 64, 20, 50, 10).ef();
  12.         
  13. //嘴巴
  14. g.ss(15, 'round', 'round').s("#000").mt(45, 155).bt(83, 307, 254, 317, 296, 152);

  16. // 创建场景，并把笑脸画在场景上
  17. var myCanvas = new Canvas();
  18. var myStage = new createjs.Stage(myCanvas);
  19. s.x = 50;
  20. s.y = 50;
  21. myStage.addChild(s);
  22. myStage.update();
复制代码

CreateJS对所有作图接口提供了“微缩版”，这样可以对那些冗长的方法名进行压缩，但是这样不便于阅读。

  1. var s = new createjs.Shape();
  2. var g = s.graphics;
  3. //云软件：www.misoft.com.cn
  4.         
  5. //头
  6. g.ss(15, 'round', 'round').s("#000").f("#F00").dc(170, 170, 170).ef().ss(1, 'round', 'round');
  7.         
  8. //右眼
  9. g.ss(5, 'round', 'round').s("#000").f("#000").rr(125, 64, 20, 50, 10).ef();
  10.         
  11. //左眼
  12. g.ss(5, 'round', 'round').s("#000").f("#000").rr(200, 64, 20, 50, 10).ef();
  13.         
  14. //嘴巴
  15. g.ss(15, 'round', 'round').s("#000").mt(45, 155).bt(83, 307, 254, 317, 296, 152);

  17. // 创建场景，并把笑脸画在场景上
  18. var myCanvas = new Canvas();
  19. var myStage = new createjs.Stage(myCanvas);
  20. s.x = 50;
  21. s.y = 50;
  22. myStage.addChild(s);
  23. myStage.update();
复制代码

CreateJS对所有作图接口提供了“微缩版”，这样可以对那些冗长的方法名进行压缩，但是这样不便于阅读。

    本文云软件[www.misoft.com.cn] 转载自网络

posted @ 2014-12-24 13:20  无名盗闪  阅读(662)  评论(0)    收藏  举报