canvas画流程图
用canvas画流程图:
需求:最后一个圆圈无直线
遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且overflow-y: auto;js里通过document.getElementById("workflow").width = 10*180设置画布的宽度(假定有画10个圆)
接来下就是圆和直线、斜线的x、y坐标的计算。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="workflow_left_content" style="width:100% ;overflow-x: auto">
<canvas id="workflow" height=300></canvas>
</div> </body>
<script src="../jquery-1.11.3.js"></script>
<script type="text/javascript"> $(function(){
var cont = document.getElementById("workflow").getContext("2d");
document.getElementById("workflow").width = 10 * 180;//根据数据的多少来设定画布的宽度
for (var i =0; i<11; i++){
arcTopStroke(cont,200 + i*150 ,100 ,20, i, 10,"yyyy-MM-dd hh:mm:ss","hash","createBy");
arcStroke(cont,100 + i*150 , 180 ,20, i, 10, "text");
lineStroke(cont,110 + i*150 , 165 ,20, i, 10)
} }); //画top圆
function arcTopStroke(cont, x, y, r, i, len, time, hash, ID){
cont.beginPath();
cont.arc(x, y, r, 0, 2*Math.PI);
cont.lineWidth = 5;
cont.strokeStyle = "#999999";
cont.stroke();
cont.closePath();
cont.fillText(time, x, y-45);
cont.fillText(hash, x, y-30);
cont.fillText(ID, x - 120, y+140); if( i < len ){
cont.moveTo(x + r, y);
cont.lineTo(x + r + 110, y);
cont.lineWidth = 2;
cont.stroke();
}
} //画底部圆
function arcStroke(cont, x, y, r, i, len, activityName) { cont.beginPath();
cont.arc(x, y, r, 0, 2*Math.PI);
cont.lineWidth = 5;
cont.strokeStyle = "#bcbcbc";
cont.stroke();
cont.closePath();
cont.textAlign = "center";
cont.fillText(activityName, x, y+38);
cont.closePath(); if( i < len ){
cont.moveTo(x + r, y);
cont.lineTo(x + r + 110, y);
cont.lineWidth = 2;
cont.stroke();
}
} //斜线
function lineStroke(cont, x, y) {
cont.moveTo(x, y);
cont.lineTo(x + 75, y-55);
cont.lineWidth = 2;
cont.stroke(); }
</script>
</html>
canvas画流程图的更多相关文章
- html5 canvas画流程图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- canvas绘制流程图
最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件 代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axs ...
- activiti在线画流程图
springboot2.2 activiti6.0 activiti-modeler 5.22.0 注明:版本不一样会导致报错 上一篇:springboot整合activiti 效果图 代码分享:ht ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
随机推荐
- java使用google开源工具实现图片压缩【转】
jar包名 import net.coobird.thumbnailator.Thumbnails; import net.coobird.thumbnailator.geometry.Positio ...
- HDU 1018(阶乘位数 数学)
题意是求 n 的阶乘的位数. 直接求 n 的阶乘再求其位数是不行的,开始时思路很扯淡,想直接用一个数组存每个数阶乘的位数,用变量 tmp 去存 n 与 n - 1 的阶乘的最高位的数的乘积,那么 n ...
- HDU 6432(不连续环排列 ~)
题意是说在长度为 n 的环排列中,按照一定的方向(顺时针或逆时针),后一个数不能仅比前一个数大 1 , n 的下一个数不能是 1 ,问这种长度为 n 且本质不同(本质不同指环上数字的相对位置不同,如 ...
- ava.io.InputStream & java.io.FileInputStream
java.io.InputStream & java.io.FileInputStream java.io.InputStream,这个抽象类是表示字节输入流的超类,这个抽象类的共性的方法有: ...
- 细说shiro之六:session管理
官网:https://shiro.apache.org/ 我们先来看一下shiro中关于Session和Session Manager的类图. 如上图所示,shiro自己定义了一个新的Session接 ...
- SpringBoot系列: Actuator监控
Sprng Boot 2 actuator变动加大, 网上很多资料都都已经过期. ============================配置项============================ ...
- 基于WebSocket 私聊、ws_session、httpsession
[解码器跟编码器]为了可以直接sendObject 解码 => 解成计算机需要的码 => 将用户输入的文本或者二进制 序列化成消息对象. (dll 给机器吃的) 编码 => 编 ...
- mysql插入记录INSERT与多表更新
1.第一种:INSERT [INTO] tbl_name[ (col_name, ... ) ] {VALUES | VALUE}({expr |default}, ... ), (...), .. ...
- Ubuntu中创建、删除、更改、移动文件的命令
1.创建一个目录 $ sudo mkdir <目录名> 2.删除一个非空目录下的一切 $ sudo rm -rf <目录名> 3.将文件file1,更改文件名为file ...
- char,wchar_t 长度
(测试环境:VC++6.0) char类型 wchar_t类型 类型大小(32位系统) 8位 16位 常量字符表示法 'A' L'A' 或 'A' 常量字符串表示法 'hello' L'hello' ...