1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.  
  9.         <canvas id="demoCanvas" width="388" height="218" style="background-color: #243356;"></canvas>
  10.  
  11.         <script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  12.         <script src="js/lib/easal/lib/easeljs-0.8.2.combined.js" type="text/javascript" charset="utf-8"></script>
  13.         <script type="text/javascript">
  14.             var draw = {};
  15.             (function(){
  16.                 var stage = new createjs.Stage('demoCanvas');
  17.  
  18.                 //画四方形
  19.                 function drawRect(param){
  20.                     var p = $.extend(true, {
  21.                         x: 0,
  22.                         y: 0,
  23.                         width: 80,
  24.                         height: 20,
  25.                         fill: 'red'
  26.                     }, param);
  27.  
  28.                     var circle = new createjs.Shape();
  29.                     circle.graphics.beginFill(p.fill).drawRect(p.x,p.y,p.width,p.height);
  30.                     stage.addChild(circle);
  31.                     stage.update();
  32.                 }
  33.                 //画直线
  34.                 function drawLine(param){
  35.                     var p = $.extend(true, {
  36.                         x: 0,
  37.                         y: 0,
  38.                         x1: 10,
  39.                         y1: 10,
  40.                         fill: 'red'
  41.                     } , param);
  42.  
  43.                     var g= new createjs.Graphics();
  44.                     g.setStrokeStyle(2);
  45.                     g.beginStroke("#7FFF00");
  46.                     //g.beginFill("red");
  47.                     g.moveTo(p.x,p.y).lineTo(p.x1,p.y1);
  48.                     g.endStroke();
  49.  
  50.                     _drawToCanvas(g);
  51.                 }
  52.  
  53.                 //文字
  54.                 function write(param){
  55.                     var p = $.extend(true, {
  56.                         x: 0,
  57.                         y: 0,
  58.                         color: "#333",
  59.                         text: ""
  60.                     }, param);
  61.                     var txt = new createjs.Text(p.text , "14px 微软雅黑" , p.color);
  62.                     txt.lineWidth = 150;
  63.                     txt.x = p.x;
  64.                     txt.y = p.y;
  65.                     stage.addChild(txt);
  66.                     stage.update();
  67.                 }
  68.  
  69.                 function _drawToCanvas(graphics, canvas){
  70.                     canvas = canvas || 'demoCanvas';
  71.                     stage = stage || new createjs.Stage(canvas);
  72.  
  73.                     var shape = new createjs.Shape(graphics);
  74.  
  75.                     stage.addChild(shape);
  76.  
  77.                     stage.update();
  78.                 }
  79.  
  80.                 draw = {
  81.                     drawRect: drawRect,
  82.                     drawLine: drawLine,
  83.                     write: write
  84.                 }
  85.             })();
  86.  
  87.             draw.drawLine({
  88.                 x: 190,
  89.                 y: 40,
  90.                 x1: 80,
  91.                 y1: 150
  92.             });
  93.  
  94.             draw.drawLine({
  95.                 x: 190,
  96.                 y: 40,
  97.                 x1: 190,
  98.                 y1: 150
  99.             });
  100.  
  101.             draw.drawLine({
  102.                 x: 190,
  103.                 y: 40,
  104.                 x1: 300,
  105.                 y1: 150
  106.             });
  107.  
  108.             draw.drawRect({
  109.                 fill: 'skyblue',
  110.                 x: 150,
  111.                 y: 20
  112.             });
  113.  
  114.             draw.drawRect({
  115.                 fill: 'skyblue',
  116.                 x: 40,
  117.                 y: 150
  118.             });
  119.  
  120.             draw.drawRect({
  121.                 fill: 'skyblue',
  122.                 x: 150,
  123.                 y: 150
  124.             });
  125.  
  126.             draw.drawRect({
  127.                 fill: 'skyblue',
  128.                 x: 260,
  129.                 y: 150
  130.             });
  131.  
  132.             draw.write({
  133.                 text: "宿 迁",
  134.                 x: 175,
  135.                 y: 20
  136.             });
  137.  
  138.             draw.write({
  139.                 text: "移 动",
  140.                 x: 60,
  141.                 y: 150
  142.             });
  143.  
  144.             draw.write({
  145.                 text: "联 通",
  146.                 x: 175,
  147.                 y: 150
  148.             });
  149.  
  150.             draw.write({
  151.                 text: "电 信",
  152.                 x: 285,
  153.                 y: 150
  154.             });
  155.         </script>
  156.     </body>
  157. </html>

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8" />
  5.          <title></title>
  6.      </head>
  7.      <body>
  8.  
  9.          <canvas id="demoCanvas" width="388" height="218" style="background-color: #243356;"></canvas>
  10.  
  11.          <script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  12.          <script src="js/lib/easal/lib/easeljs-0.8.2.combined.js" type="text/javascript" charset="utf-8"></script>
  13.          <script type="text/javascript">
  14.              $(function(){
  15.      var draw = {};
  16.      (function(){
  17.          var stage = new createjs.Stage('demoCanvas');
  18.  
  19.          //画四方形
  20.          function drawRect(param){
  21.              var p = $.extend(true, {
  22.                  x: 0,
  23.                  y: 0,
  24.                  width: 80,
  25.                  height: 40,
  26.                  fill: 'red'
  27.              }, param);
  28.  
  29.              var circle = new createjs.Shape();
  30.              circle.graphics.beginFill(p.fill).drawEllipse(p.x,p.y,p.width,p.height);
  31.              stage.addChild(circle);
  32.              stage.update();
  33.          }
  34.          //画直线
  35.          function drawLine(param){
  36.              var p = $.extend(true, {
  37.                  x: 0,
  38.                  y: 0,
  39.                  x1: 10,
  40.                  y1: 10,
  41.                  fill: 'red'
  42.              } , param);
  43.  
  44.              var g= new createjs.Graphics();
  45.              var aaaa = g.setStrokeDash([10,5]);
  46.              g.beginStroke("#7FFF00");
  47.              //g.beginFill("red");
  48.              g.moveTo(p.x,p.y).lineTo(p.x1,p.y1);
  49.              g.endStroke();
  50.              _drawToCanvas(g);
  51.          }
  52.  
  53.          //文字
  54.          function write(param){
  55.              var p = $.extend(true, {
  56.                  x: 0,
  57.                  y: 0,
  58.                  color: "#333",
  59.                  text: ""
  60.              }, param);
  61.              var txt = new createjs.Text(p.text , "14px 微软雅黑" , p.color);
  62.              txt.lineWidth = 150;
  63.              txt.x = p.x;
  64.              txt.y = p.y;
  65.              stage.addChild(txt);
  66.              stage.update();
  67.          }
  68.  
  69.          function _drawToCanvas(graphics){
  70.              //canvas = canvas || 'demoCanvas';
  71.              stage = stage || new createjs.Stage(canvas);
  72.  
  73.              var shape = new createjs.Shape(graphics);
  74.  
  75.              stage.addChild(shape);
  76.              var i = 5;
  77.              createjs.Ticker.on('tick' , function(){
  78.                  i--;
  79.                  graphics._strokeDash.offset = i;
  80.                  stage.update();
  81.              })
  82.              stage.update();
  83.          }
  84.  
  85.          draw = {
  86.              drawRect: drawRect,
  87.              drawLine: drawLine,
  88.              write: write
  89.          }
  90.      })();
  91.  
  92.      draw.drawLine({
  93.          x: 190,
  94.          y: 150,
  95.          x1: 80,
  96.          y1: 40
  97.      });
  98.  
  99.      draw.drawLine({
  100.          x: 190,
  101.          y: 150,
  102.          x1: 190,
  103.          y1: 40
  104.      });
  105.  
  106.      draw.drawLine({
  107.          x: 190,
  108.          y: 150,
  109.          x1: 300,
  110.          y1: 40
  111.      });
  112.  
  113.      draw.drawRect({
  114.          fill: 'skyblue',
  115.          x: 150,
  116.          y: 150
  117.      });
  118.  
  119.      draw.drawRect({
  120.          fill: '#007FCC',
  121.          x: 40,
  122.          y: 20
  123.      });
  124.  
  125.      draw.drawRect({
  126.          fill: '#DA0009',
  127.          x: 150,
  128.          y: 20
  129.      });
  130.  
  131.      draw.drawRect({
  132.          fill: '#7DB926',
  133.          x: 260,
  134.          y: 20
  135.      });
  136.  
  137.      draw.write({
  138.          text: "宿 迁",
  139.          x: 175,
  140.          y: 160
  141.      });
  142.  
  143.      draw.write({
  144.          text: "移 动",
  145.          x: 60,
  146.          y: 30
  147.      });
  148.  
  149.      draw.write({
  150.          text: "联 通",
  151.          x: 175,
  152.          y: 30
  153.      });
  154.  
  155.      draw.write({
  156.          text: "电 信",
  157.          x: 285,
  158.          y: 30
  159.      });
  160.  });
  161.  
  162.          </script>
  163.      </body>
  164.  </html>

增加了动态效果

createjs easal.js制作了一个很简单的链路图的更多相关文章

  1. [.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office

    打造一个很简单的文档转换器 - 使用组件 Spire.Office [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6024827.html 序 之前,& ...

  2. 国外大神制作的一个很棒的matplotlib 可视化教程

    国外大神制作的一个很棒的matplotlib 可视化教程 参考:https://www.machinelearningplus.com/plots/top-50-matplotlib-visualiz ...

  3. 一个很简单的jQuery插件实例教程(菜鸟级)

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...

  4. java(itext) 一个很简单的PDF表格生成工具

    先上个效果图 因为做的项目涉及到数据预测,其中有大量打印业务来支撑实体店的运营,因为注重的是数据,要求简洁,清晰,所以写了个很简单也很实用的工具类. 如果需要编写样式或者插入背景,都可以查阅itex官 ...

  5. 一个很简单的SqlServer生成常用C#语句工具的诞生

    前言: 这个文章只要是记录一下,这个工具的诞生过程.作用.其中的技术实在是太简单可以说没有什么技术~主要是锻炼一下写文章的能力! 正文: 在开发项目的时,常常会要维护或变更一些老项目,涉及到简单的几张 ...

  6. 一个很简单的php留言板。。。。搭建在sae上的。。。

    我在sae上搭建了一个个人简历的页面: 有兴趣的可以访问  http://671coder.sinaapp.com/ 在做下面一个简单的留言板的时候,卡了我很久,虽然完全没用过php..但是还是最后勉 ...

  7. js图片拖放原理(很简单，不是框架，入门基础)

    <html> <meta> <script src='jquery-1.8.3.min.js'></script> <script> /* ...

  8. 『NYIST』第八届河南省ACM竞赛训练赛[正式赛一]-CodeForces 236A，虽然很水，但有一个很简单的函数用起来方便

    A. Boy or Girl time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  9. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

随机推荐

  1. How to connect to Linux VM from Windows

  2. Win10/UWP 让你的App使用上扫描仪

    UWP的扫描仪功能现在被微软划分到了[Windows Desktop Extensions for the UWP]中,如果要使用扫描仪扫描图片到自己的App中,首先我们要添加[Windows Des ...

  3. 黑马程序员：Java编程_7K面试题之交通灯管理系统

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 模拟实现十字路口的交通灯管理系统逻辑,具体需求如下: 异步随机生成按照各个路线行 ...

  4. GDB调试基本命令

    一.列文件清单 list / l 列出产生执行文件的源代码的一部分 //列出 line1 到 line2 行之间的源代码 (gdb) list line1, line2 //输出从上次调用list命令 ...

  5. New XAMPP security concept:错误解决方法

    New XAMPP security concept:错误解决方法 (2014-03-06 16:07:46) 转载▼   分类: php 在Linux上配置xampp后远程访问域名报错: New X ...

  6. 《剑指offer》面试题11： 数值的整数次方

    面试题11: 数值的整数次方 剑指offer面试题11,题目如下 实现函数double power(double base,int exponent),求base的exponent次方, 不得使用库 ...

  7. java编程经验积累

    1.java批量删除checkbox中选中的对象-CSDN论坛-CSDN.NET-中国最大的IT技术社区  http://bbs.csdn.net/topics/360223125 2.重定向与转发路 ...

  8. Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...

  9. printf函数

    printf函数的格式及含义 d                    以十进制带符号的形式输出整数(对正数不输出符号) o                    以八进制无符号的形式输出整数(不输出 ...

  10. 正则表达式测试器 beta_

    说明:"言简意赅".简而从之:如题※网上已经有很多正则的测试工具了※感谢小Z推荐了一款非常好的(但是个别子匹配项多时卡顿.应该是我的表达式问题)故而花了点时间照着“抄”了一个,并配 ...