用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. IE6浏览器的bug问题及相关解决的方法

    IE6浏览器的bug问题及相关解决的方法 1.css浮动边距加倍错误(双倍边距BUG)的解决办法   该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!!   解决方法:_displ ...

  2. mysql：insert插入数据过慢如何解决，设置innodb_flush_log_at_trx_commit为0就能解决

    问题: 最近在做性能测试,造数据,发现insert好慢,只有几十条每秒,很奇怪,最后再网上找到了原因. 网文如下: MY SQL insert 速度过慢 最近在用MySQL做存储,测试中发现插入数据太 ...

  3. 复杂sql查询语句

    视图也叫虚表 1.表中保存实际数据,视图保存从表中取出数据所使用的SELECT语句,视图也是一张表,之间区别是是否保存实际数据. 2.使用视图可以完成跨多表查询数据.可以将常用SELECT语句做成视图 ...

  4. 理解BFC

    BFC:块格式化上下文(Block Formatting Context) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. BFC 是一 ...

  5. 深入理解Python异步编程（上）

    本文代码整理自:深入理解Python异步编程(上) 参考:A Web Crawler With asyncio Coroutines 一.同步阻塞方式 import socket def blocki ...

  6. 404.17 - 动态内容通过通配符 MIME 映射映射到静态文件处理程序

    刚刚重装了系统,原有的ASP.NET工程下面的WebService无法运行,如下: 404.17 - 动态内容通过通配符 MIME 映射映射到静态文件处理程序 微软的提示,是做三项更改,但是我改了之后 ...

  7. mini2440串口使用

    1.安装驱动CH340-USB转串口驱动,安装完成最好重启一下电脑. 2.用串口线将开发板与pc项链,并打开电源,通过电脑设备管理器查看端口(下一步要用到). 3.运行SecureCRT.exe,并建 ...

  8. redis的常用命令及实例讲解

    使用命令行操作redis 数据类型 字符串String 列表list 使用双向循序链表实现(LinkedList) 散列 Hash 一般应用于将redis作为分布式缓存,存储数据库中的数据对象 集合s ...

  9. jsp 起航 和Servlet通过attribute通信

    @WebServlet(name = "ticketServlet",urlPatterns = {"/tickets"},loadOnStartup = 1) ...

  10. 【刷题记录】BZOJ-USACO

    接下来要滚去bzoj刷usaco的题目辣=v=在博客记录一下刷题情况,以及存一存代码咯.加油! 1.[bzoj1597][Usaco2008 Mar]土地购买 #include<cstdio&g ...