用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. golang cronexpr定时任务包使用

    包获取 go get -u github.com/gorhill/cronexpr 创建一个定时任务 expr, err = cron.Parse("* * * * *"); 获得 ...

  2. source命令导入大数据速度慢优化

    XX市邮政微商城的项目数据库,300多M,约220万条数据,source命令导入花了20个小时左右,太不可思议. 速度慢原因:220多万条数据,就 insert into 了220多万次,下图: 这是 ...

  3. HDU 1098(条件满足 数学）

    题意是问是否存在非负整数 a,使得任取非负整数 x,f(x) 能够被 65 整除,其中 f(x) = 5*x^13 + 13*x^5 + k*a*x,如存在,输出 a 的最小值,如不存在,输出 no. ...

  4. HDU 1284(钱币兑换 背包/母函数)

    与 HDU 1028 相似的题目. 方法一:完全背包. 限制条件:硬币总值不超过 n. 目标:求出组合种数. 令 dp[ i ][ j ] == x 表示用前 i 种硬币组合价值为 j 的钱共 x 种 ...

  5. Entity Framework Code First 学习日记（1）精

    我最近几天正在学习Entity Framework Code First.我打算分享一系列的学习笔记,今天是第一部分: 为什么要使用Code First: 近 年来,随着domain driven d ...

  6. MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具

    MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具集成Visual Studio 2013 MVC 5 Scaffolder + ...

  7. 自学python 5.

    1.tu = ("alex", [11, 22, {"k1": 'v1', "k2": ["age", "na ...

  8. C#中连接MySQL数据

    小结一下MySQL在C#中是如何连接的,并做一些简单的选择(SELECT).插入( INSERT).更新( UPDATE).删除(DELETE ) (一)连接 a) Firstly, you shou ...

  9. 魔改版BBR

    魔改版bbr加速: wget -N --no-check-certificate "https://raw.githubusercontent.com/chiakge/Linux-NetSp ...

  10. Android中的分层----service 层,domain层，dao 层，action层等设计

    service 层 服务层:直接为客户端提供的服务或功能.也是系统所能对外提供的功能. domain层 领域层:系统内的领域活动,存放实体. dao 层 持久层,DB操作都写在这里,数据访问对象,通过 ...