createjs easal.js制作了一个很简单的链路图
<!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制作了一个很简单的链路图的更多相关文章
- [.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office
打造一个很简单的文档转换器 - 使用组件 Spire.Office [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6024827.html 序 之前,& ...
- 国外大神制作的一个很棒的matplotlib 可视化教程
国外大神制作的一个很棒的matplotlib 可视化教程 参考:https://www.machinelearningplus.com/plots/top-50-matplotlib-visualiz ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- java(itext) 一个很简单的PDF表格生成工具
先上个效果图 因为做的项目涉及到数据预测,其中有大量打印业务来支撑实体店的运营,因为注重的是数据,要求简洁,清晰,所以写了个很简单也很实用的工具类. 如果需要编写样式或者插入背景,都可以查阅itex官 ...
- 一个很简单的SqlServer生成常用C#语句工具的诞生
前言: 这个文章只要是记录一下,这个工具的诞生过程.作用.其中的技术实在是太简单可以说没有什么技术~主要是锻炼一下写文章的能力! 正文: 在开发项目的时,常常会要维护或变更一些老项目,涉及到简单的几张 ...
- 一个很简单的php留言板。。。。搭建在sae上的。。。
我在sae上搭建了一个个人简历的页面: 有兴趣的可以访问 http://671coder.sinaapp.com/ 在做下面一个简单的留言板的时候,卡了我很久,虽然完全没用过php..但是还是最后勉 ...
- js图片拖放原理(很简单，不是框架，入门基础)
<html> <meta> <script src='jquery-1.8.3.min.js'></script> <script> /* ...
- 『NYIST』第八届河南省ACM竞赛训练赛[正式赛一]-CodeForces 236A，虽然很水，但有一个很简单的函数用起来方便
A. Boy or Girl time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- react.js 高阶组件----很简单的实例理解高阶组件思想
调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...
随机推荐
- WPF中未将对象引用设置到对象的实例
前几天,我开始了WPF的基础学习,一上来我就遇到了一个令我头痛的问题,按照书上的例子我写了一段属于自己的代码,一个简单的色调器.满心期待的编译运行,就出现了未将对象引用设置到对象的实例.我在网上查阅了 ...
- 挂载NFS
ARM目标板:192.168.31.66 ubuntu IP:192.168.31.218 一.先安装nfs服务器客户端: $sudo apt-get install nfs-kernel-serve ...
- Array.prototype.sort()对数组对象排序的方法
Array.prototype.sort()方法接受一个参数——Function,Function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行 ...
- 动态规划VS分治策略
•在用分治法解决问题时,由于子问题的数目往往是问题规模的指数函数,因此对时间的消耗太大. •动态规划的思想在于,如果各个子问题不是独立的,不同的子问题的个数只是多项式量级,而我们能够保存已经解决的子问 ...
- LintCode Two Strings Are Anagrams
1. 把string变为char数组 2. 排序Arrays.sort() public class Solution { /** * @param s: The first string * @pa ...
- 0823--静默安装、fiddler设置断点、f12清除数据记录
刚写了半天,然后没保存,哎,墙角抹泪. Anyway,记一下最近工作中遇到的问题吧. 1. 静默安装 cmd命令:拖入exe 文件,空格后输入--silent-install 若要在安装时修改主页,则 ...
- Android studio 菜单介绍 3.1.文件(File)
文件(File) 3.1.1.New 1. Android Studio中的Project相当于Eclipse中的Workspace 3.1.5.Close Prject 关闭当前项目打开的窗口 2. ...
- HttpURlconntiuon获取网络数据
package Network; import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream ...
- C的文件操作2
[转] C语言文件操作 概述 所谓文件(file)一般指存储在外部介质上数据的集合,比如我们经常使用的mp3.mp4.txt.bmp.jpg.exe.rmvb等等.这些文件各有各的用途,我们通常将它 ...
- mysql relay log参数汇总
前言:MySQL进行主主复制或主从复制的时候会在配置文件制定的目录下面产生相应的relay log,本文档总结这些相关参数的定义及解释. 1.什么是relay log The relay log, l ...