用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画流程图的更多相关文章

  1. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. canvas绘制流程图

    最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件 代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axs ...

  3. activiti在线画流程图

    springboot2.2 activiti6.0 activiti-modeler 5.22.0 注明:版本不一样会导致报错 上一篇:springboot整合activiti 效果图 代码分享:ht ...

  4. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  5. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  6. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  8. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

随机推荐

  1. java使用google开源工具实现图片压缩【转】

    jar包名 import net.coobird.thumbnailator.Thumbnails; import net.coobird.thumbnailator.geometry.Positio ...

  2. HDU 1018(阶乘位数 数学)

    题意是求 n 的阶乘的位数. 直接求 n 的阶乘再求其位数是不行的,开始时思路很扯淡,想直接用一个数组存每个数阶乘的位数,用变量 tmp 去存 n 与 n - 1 的阶乘的最高位的数的乘积,那么 n ...

  3. HDU 6432(不连续环排列 ~)

    题意是说在长度为 n 的环排列中,按照一定的方向(顺时针或逆时针),后一个数不能仅比前一个数大 1 , n 的下一个数不能是 1 ,问这种长度为 n 且本质不同(本质不同指环上数字的相对位置不同,如 ...

  4. ava.io.InputStream & java.io.FileInputStream

    java.io.InputStream & java.io.FileInputStream java.io.InputStream,这个抽象类是表示字节输入流的超类,这个抽象类的共性的方法有: ...

  5. 细说shiro之六：session管理

    官网:https://shiro.apache.org/ 我们先来看一下shiro中关于Session和Session Manager的类图. 如上图所示,shiro自己定义了一个新的Session接 ...

  6. SpringBoot系列: Actuator监控

    Sprng Boot 2 actuator变动加大, 网上很多资料都都已经过期. ============================配置项============================ ...

  7. 基于WebSocket 私聊、ws_session、httpsession

    [解码器跟编码器]为了可以直接sendObject 解码 => 解成计算机需要的码 => 将用户输入的文本或者二进制 序列化成消息对象.    (dll 给机器吃的) 编码 => 编 ...

  8. mysql插入记录INSERT与多表更新

    1.第一种:INSERT [INTO] tbl_name[ (col_name, ... ) ]  {VALUES | VALUE}({expr |default}, ... ), (...), .. ...

  9. Ubuntu中创建、删除、更改、移动文件的命令

    1.创建一个目录 $ sudo mkdir <目录名>   2.删除一个非空目录下的一切 $ sudo rm -rf <目录名>   3.将文件file1,更改文件名为file ...

  10. char，wchar_t 长度

    (测试环境:VC++6.0) char类型 wchar_t类型 类型大小(32位系统) 8位 16位 常量字符表示法 'A' L'A' 或 'A' 常量字符串表示法 'hello' L'hello' ...