<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <canvas id="demoCanvas" width="388" height="218" style="background-color: #243356;"></canvas>

        <script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/lib/easal/lib/easeljs-0.8.2.combined.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var draw = {};

            (function(){

                var stage = new createjs.Stage('demoCanvas');

                //画四方形

                function drawRect(param){

                    var p = $.extend(true, {

                        x: 0,

                        y: 0,

                        width: 80,

                        height: 20,

                        fill: 'red'

                    }, param);

                    var circle = new createjs.Shape();

                    circle.graphics.beginFill(p.fill).drawRect(p.x,p.y,p.width,p.height);

                    stage.addChild(circle);

                    stage.update();

                }

                //画直线

                function drawLine(param){

                    var p = $.extend(true, {

                        x: 0,

                        y: 0,

                        x1: 10,

                        y1: 10,

                        fill: 'red'

                    } , param);

                    var g= new createjs.Graphics();

                    g.setStrokeStyle(2);

                    g.beginStroke("#7FFF00");

                    //g.beginFill("red");

                    g.moveTo(p.x,p.y).lineTo(p.x1,p.y1);

                    g.endStroke();

                    _drawToCanvas(g);

                }

                //文字

                function write(param){

                    var p = $.extend(true, {

                        x: 0,

                        y: 0,

                        color: "#333",

                        text: ""

                    }, param);

                    var txt = new createjs.Text(p.text , "14px 微软雅黑" , p.color);

                    txt.lineWidth = 150;

                    txt.x = p.x;

                    txt.y = p.y;

                    stage.addChild(txt);

                    stage.update();

                }

                function _drawToCanvas(graphics, canvas){

                    canvas = canvas || 'demoCanvas';

                    stage = stage || new createjs.Stage(canvas);

                    var shape = new createjs.Shape(graphics);

                    stage.addChild(shape);

                    stage.update();

                }

                draw = {

                    drawRect: drawRect,

                    drawLine: drawLine,

                    write: write

                }

            })();

            draw.drawLine({

                x: 190,

                y: 40,

                x1: 80,

                y1: 150

            });

            draw.drawLine({

                x: 190,

                y: 40,

                x1: 190,

                y1: 150

            });

            draw.drawLine({

                x: 190,

                y: 40,

                x1: 300,

                y1: 150

            });

            draw.drawRect({

                fill: 'skyblue',

                x: 150,

                y: 20

            });

            draw.drawRect({

                fill: 'skyblue',

                x: 40,

                y: 150

            });

            draw.drawRect({

                fill: 'skyblue',

                x: 150,

                y: 150

            });

            draw.drawRect({

                fill: 'skyblue',

                x: 260,

                y: 150

            });

            draw.write({

                text: "宿 迁",

                x: 175,

                y: 20

            });

            draw.write({

                text: "移 动",

                x: 60,

                y: 150

            });

            draw.write({

                text: "联 通",

                x: 175,

                y: 150

            });

            draw.write({

                text: "电 信",

                x: 285,

                y: 150

            });

        </script>

    </body>

</html>

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <canvas id="demoCanvas" width="388" height="218" style="background-color: #243356;"></canvas>

         <script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

         <script src="js/lib/easal/lib/easeljs-0.8.2.combined.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

     var draw = {};

     (function(){

         var stage = new createjs.Stage('demoCanvas');

         //画四方形

         function drawRect(param){

             var p = $.extend(true, {

                 x: 0,

                 y: 0,

                 width: 80,

                 height: 40,

                 fill: 'red'

             }, param);

             var circle = new createjs.Shape();

             circle.graphics.beginFill(p.fill).drawEllipse(p.x,p.y,p.width,p.height);

             stage.addChild(circle);

             stage.update();

         }

         //画直线

         function drawLine(param){

             var p = $.extend(true, {

                 x: 0,

                 y: 0,

                 x1: 10,

                 y1: 10,

                 fill: 'red'

             } , param);

             var g= new createjs.Graphics();

             var aaaa = g.setStrokeDash([10,5]);

             g.beginStroke("#7FFF00");

             //g.beginFill("red");

             g.moveTo(p.x,p.y).lineTo(p.x1,p.y1);

             g.endStroke();

             _drawToCanvas(g);

         }

         //文字

         function write(param){

             var p = $.extend(true, {

                 x: 0,

                 y: 0,

                 color: "#333",

                 text: ""

             }, param);

             var txt = new createjs.Text(p.text , "14px 微软雅黑" , p.color);

             txt.lineWidth = 150;

             txt.x = p.x;

             txt.y = p.y;

             stage.addChild(txt);

             stage.update();

         }

         function _drawToCanvas(graphics){

             //canvas = canvas || 'demoCanvas';

             stage = stage || new createjs.Stage(canvas);

             var shape = new createjs.Shape(graphics);

             stage.addChild(shape);

             var i = 5;

             createjs.Ticker.on('tick' , function(){

                 i--;

                 graphics._strokeDash.offset = i;

                 stage.update();

             })

             stage.update();

         }

         draw = {

             drawRect: drawRect,

             drawLine: drawLine,

             write: write

         }

     })();

     draw.drawLine({

         x: 190,

         y: 150,

         x1: 80,

         y1: 40

     });

     draw.drawLine({

         x: 190,

         y: 150,

         x1: 190,

         y1: 40

     });

     draw.drawLine({

         x: 190,

         y: 150,

         x1: 300,

         y1: 40

     });

     draw.drawRect({

         fill: 'skyblue',

         x: 150,

         y: 150

     });

     draw.drawRect({

         fill: '#007FCC',

         x: 40,

         y: 20

     });

     draw.drawRect({

         fill: '#DA0009',

         x: 150,

         y: 20

     });

     draw.drawRect({

         fill: '#7DB926',

         x: 260,

         y: 20

     });

     draw.write({

         text: "宿 迁",

         x: 175,

         y: 160

     });

     draw.write({

         text: "移 动",

         x: 60,

         y: 30

     });

     draw.write({

         text: "联 通",

         x: 175,

         y: 30

     });

     draw.write({

         text: "电 信",

         x: 285,

         y: 30

     });

 });

         </script>

     </body>

 </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. UICollectionview实现自定义cell的移动删除

    今天 ,有群里人询问了 ,支付宝首页的UICollectionview 的cell(其实不能成为cell,应该是item,不过大家习惯这么称呼了)怎么实现 自定义的拖拽 和删除,然后我查了下资料,它的 ...

  2. linux cron计划任务

    说明:Crontab是Linux系统中在固定时间执行某一个程序的工具,类似于Windows系统中的任务计划程序 下面通过详细实例来说明在Linux系统中如何使用Crontab 操作系统:CentOS ...

  3. PHP反向代理-百度图片

    最近在一些开发中需要调用百度贴吧等一系列的百度图片 但是防盗链实在讨厌 于是就简单利用curl实现了反向代理(应该是这么叫的) 如果网站直接调用百度图片 会出现如下(博客园貌似在白名单 可以直接用百度 ...

  4. HttpClient方式模拟http请求

    方式一:HttpClient import org.apache.commons.lang.exception.ExceptionUtils; import org.apache.http.*; im ...

  5. Mac 配置Spark环境scala+python版本（Spark1.6.0）

    1. 从官网下载Spark安装包,解压到自己的安装目录下(默认已经安装好JDK,JDK安装可自行查找): spark官网:http://spark.apache.org/downloads.html ...

  6. IOS照片颠倒分析及移动/页面端的处理策略和思路

    前言: 前几天, 写了一篇关于IOS手机上传照片颠倒的技术分析文章: IOS照片颠倒分析及PHP服务端的处理. 不过其思路是从服务器来进行处理的, 这种做法相当普遍. 今天来讲述下, 如何从移动端/页 ...

  7. mysqlbinlog 参数及用法说明

    mysqlbinlog用法说明 服务器生成的二进制日志文件写成二进制格式.要想检查这些文本格式的文件,应使用mysqlbinlog实用工具.应这样调用mysqlbinlog:shell> mys ...

  8. 【转载】oracle dbms_metadata.get_ddl的使用方法总结

    转自:http://www.jb51.net/article/39715.htm dbms_metadata.get_ddl()用于获取对象的ddl,其具体用法如下. 注意:在sqlplus里,为了更 ...

  9. iphone 浏览器自动解析数字为号码解决方法

    iphone 浏览器自动解析数字为号码解决方法 www.MyException.Cn  网友分享于:2015-10-09  浏览:0次   iphone 浏览器自动解析数字为号码解决办法 在工作中遇到 ...

  10. nodeType、nodeName和nodeValue

    首先了解一下DOM中有三大节点,分别是 元素节点,文本节点,属性节点 元素节点:构成了DOM的基础.文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,&l ...