zoukankan      html  css  js  c++  java
  • 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="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>
    

      

  • 相关阅读:
    normalize.css 中文版
    [转载]自适应高度输入框
    【转载】H5页面列表的无线滚动加载(前端分页)
    CSS设置table下tbody滚动条与thead对齐的方法
    [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
    wordpress 目录、数据结构和解析原理
    WordPress基础知识:条件判断标签及用法大全
    主题如何添加tag标签页面
    WordPress进阶:[2]不同页面显示不同的侧边栏
    WordPress进阶:[1]怎样用tag标签做导航菜单
  • 原文地址:https://www.cnblogs.com/zhangym118/p/8405962.html
Copyright © 2011-2022 走看看