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); 如上所示,直接 ...

随机推荐

hdu 6383
题意是说给定一个序列,能否通过任意次对部分数字 +1,对部分数字 -2的操作使得序列在满足全部非负且任意两元素的差值不超过1的前提下最小值最大,求最大值. 一开始的时候没有注意到整个序列全是非负数,还 ...
SQL-数据库刷题
因是个人总结,只列出对自己有用的或较难的: 下面这道题,第一次拿到,我尝试用开窗函数 ROW_NUMBER()OVER() 编号,但是发现不能够处理好连续的问题, 上网查找了别人的解法记录下来,其实 ...
CentOS7 安装 Tomcat8
安装 Java8准备更新软件yum update 如果提示没有 wget 命令,那么必须先安装 wget 如下:yum install wget 安装Tomcat8这里采用离线解压tar.gz的方式安 ...
linux_网易云音乐安装
使用命令安装一些基本包$ sudo apt install devscripts equivs git
MySQL随记(一)
数据类型 Insert Update Delete 函数
VS下个人认为比较实用的插件
懒得打字了,直接贴图
spring注解第04课 @Import
1.beans package com.atguigu.bean; public class Blue { public Blue(){ System.out.println("blue.. ...
【LDAP】LDAP注入漏洞与防御
0x01 前言前两天爆了一个LDAP漏洞,据说存在了8年现在才被发现,感概一下,不知这8年来有多少站被搞了... 想着复现这个漏洞,就先复习一下LDAP注入的相关知识吧,差了很多资料,记一下笔记. ...
【poj1741】Tree 树的点分治
题目描述 Give a tree with n vertices,each edge has a length(positive integer less than 1001). Define dis ...
qt5学习目录
qt5下载与安装,VS2017的环境配置 q ...

canvas画流程图

canvas画流程图的更多相关文章

随机推荐

热门专题