用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. OPCServer：使用KEPServer

    实际OPCServer使用(450M,中文,破解时间限制):KEPServer V6,百度网盘 ,密码: ykj2 本文为Java实现OPC通信的一部分 KEPServer中文官网 KEPServer ...

  2. HDU 1025(最长上升子序列)

    题意是要在两条平行线间连点,要在线不交叉的前提下尽可能多的连线,问最多能连多少条线. 现假定题中所给的是 9 组点,分别是:1—3,2—8,3—5,4—9,5—2,6—4,7—6,8—7,9—1,如图 ...

  3. row_number()over()使用

    语法: ROW_NUMBER ( ) OVER ( [ PARTITION BY value_expression , ... [ n ] ] order_by_clause ) 通过语法可以看出 o ...

  4. 前端面试题整理—HTTP篇

    1.常见的HTTP方法有哪些? GET: 用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器 POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用PO ...

  5. Mac 下搭建环境 homebrew/git/node.js/npm/vsCode...

    主要记录一下 homebrew/git/node.js/npm/mysql 的命令行安装 1. 首先安装 homebrew  也是一个包管理工具: mac 里打开终端命令行工具,粘下面一行回车安装br ...

  6. AAndroid Studio的\drawable还是mipmap

    图片应该放在drawable文件夹下,而mipmap文件夹只适合放app icons

  7. ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树

    五.KMP算法:    *KMP算法是一种改进的字符串匹配算法.    *KMP算法的关键是利用匹配失败后的信息,尽量减少模式串与主串的匹配次数以达到快速匹配的目的.具体实现就是实现一个next()函 ...

  8. 20155324 2016-2017-2 《Java程序设计》第6周学习总结

    20155324 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 InputStream与OutputStream 串流设计 1.串流:Java将输入/输出抽 ...

  9. 2017CCPC秦皇岛 M题Safest Buildings&&ZOJ3993【复杂模拟】

    题意: 给出两个半径R,r,R表示第一次的大圈半径,r表示第二次的小圈半径.第一次大圈的圆心位于(0,0),第二次小圈的圆心未知,但在大圈内,给你一个n,然后给出n个屋子的位置,问这些屋子中,第二次在 ...

  10. eureka ... is an unknown property 在 application.properties 中

    问题如图 在application.properties中无法识别eureka   解决方式 (想了想这个好像是在某个依赖里面来的)发现 eureka 是在 某个依赖里面 所以添加了以下之后就解决了 ...