基于canvas实现一个多分支流程图组件

最新推荐文章于 2023-01-30 17:49:38 发布
最新推荐文章于 2023-01-30 17:49:38 发布
阅读量5.2k 收藏 10
点赞数 1
分类专栏： 小知识点汇总 文章标签： 多分支 流向图 canvas 好用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37631322/article/details/91128968
版权

综述：使用canvas实现了一个多分支流向图，总结下主要的实现思路，有需要的朋友可直接使用，假设如果不使用canvas来绘制，使用svg来设计又该如何实现呢，思考下？

1.效果展示

2.实现思路解析

  • 需求分析

一个流程图，主要由横线，空心圆，空心圆中的实心圆三部分组成，并且随着状态的变化能控制其颜色

可以支持多分支，多分支中还包括奇数个分支和偶数个分支，实现思路上两者稍微不同

  • 核心思路说明

通过配置的数组解析绘制，如果是非数组元素，则就是画直线和圆圈，实心圆，并分别计算各自的位置（x,y）坐标，依次类推。

如果是一个数组的元素，则说明是一个多分支的元素，需要向上和向下开分支，绘制多条直线和圆圈，实心圆，依次类推即可，并分别计算各自的位置（x,y）坐标，依次类推。

3.遇到的问题总结

  • canvas是基于矢量绘制的图像，存在模糊的问题（参考连接），细节见js代码种的最后一个模块
  • 对于绘制直线的颜色控制逻辑，没有理清楚，废了些时间

4.代码展示

  • javascript代码(组件实现代码)，render方法过于冗余，但是好处是比较好理解，后期应该优化下
/**
 *流向图组件，mouyao
 */
var opsDirectionMap = function(option){
    this.const(option);
    this.init();
};
/*
*配置项引入
*/
opsDirectionMap.prototype.const=function(option){
    this.r=option.r||4;//节点半径
    this.config=option;
    this.data = option.data||[];
    this.mLeft = option.mLeft||-20;//起点距左边距离
    this.space = option.space||18*this.r;//节点之间距离
    this.angle =2*this.r;//分支上下之间的高度
    this.nodeArr = []; //存储所有的圆点的信息和坐标
};
/*
*配置项引入
*/
opsDirectionMap.prototype.init =function(){
    var myCanvas=document.getElementById(this.config.placeId);
    this.resolveVagueProblem(myCanvas);
    this.render(myCanvas);
};
/*
*判定是否数组
*/
opsDirectionMap.prototype.isArrayFn =function(o) {
    return Object.prototype.toString.call(o) === '[object Array]';
};
/*
*根据当前节点的执行状态，渲染圆点前的线条的颜色
*/
opsDirectionMap.prototype.drawDashLine =function(ctx, x1, y1, x2, y2,data,index){
    ctx.lineWidth=1;
    ctx.beginPath();
    var x=(x2-x1)/2;
    if(index>0&&!this.isArrayFn(this.data[index-1])){
        ctx.moveTo(x1,y1);
        ctx.lineTo(x1+x ,y1);
        ctx.moveTo(x1+x,y1);
        ctx.lineTo(x1+x ,y2);
        ctx.moveTo(x1+x,y2);
        ctx.lineTo(x2 ,y2);
    }else if(index>0&&this.isArrayFn(this.data[index-1])){
        ctx.moveTo(x1,y1);
        ctx.lineTo(x1+x ,y1);
        ctx.moveTo(x1+x,y1);
        ctx.lineTo(x1+x ,y2);
        ctx.moveTo(x1+x,y2);
        ctx.lineTo(x2 ,y2);
    }else{
        if(index!==0){ //删除第一个圆点的连接线
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2 ,y2);
        }
    }
    if(data.isExcuted===true){
        ctx.strokeStyle="#009aff";
    }else if(data.isExcuted===false&&index!==0&&this.data[index-1].isExcuted===true&&!this.isArrayFn(this.data[index-1])){
        ctx.strokeStyle="#009aff";
    }else if(data.isExcuted===false&&this.isArrayFn(this.data[index-1])){
        //如果上一个元素是数组
        var arr=[];
        this.data[index-1].some(function(item){
            if(item.isExcuted===true){
                arr.push(true);
            }
        });
        if(arr.length===(this.data[index-1]).length){
            ctx.strokeStyle="#009aff";
        }else{
            ctx.strokeStyle="#959595";
        }
    }else{
        ctx.strokeStyle="#959595";
    }
    ctx.stroke();
};
/*
*绘制线条，圆点，圆心，和说明文字
*/
opsDirectionMap.prototype.render =function(canvas){
        var this_ = this;
        this_.canvas = canvas;
        var ctx = canvas.getContext("2d");//上下文
        this_.ctx = ctx;
        var x = this_.mLeft; //每个操作的对象的坐标
        //var y = canvas.height/2;
        //x偏移量：this_.r*Math.sin((90-itemY)*Math.PI/180)
        //y偏移量：this_.r*Math.cos((90-itemY)*Math.PI/180)
        var y =50;
        this_.data.forEach(function(item, index){
            if(!(item instanceof Array)){
                x = index == 0?x:(x + this_.space);
                if((index-1)>=0 && this_.data[index-1] instanceof Array){
                    var arr = this_.data[index-1];
                  
                    if(arr.length % 2==0){
                        var itemY = this_.angle;
                        for(var i=0;i<arr.length/2;i++){
                            this_.drawDashLine(ctx, x - this_.space - this_.r+this_.r*Math.sin((90-itemY)*Math.PI/180), y-Math.tan(itemY*Math.PI/180)*this_.space+this_.r*Math.cos((90-itemY)*Math.PI/180), x, y,item,index);
                            itemY = itemY + this_.angle;
                        }
                        var itemY = this_.angle;
                        for(var i=0;i<arr.length/2;i++){
                            this_.drawDashLine(ctx, x - this_.space - this_.r+this_.r*Math.sin((90-itemY)*Math.PI/180), y+Math.tan(itemY*Math.PI/180)*this_.space-this_.r*Math.cos((90-itemY)*Math.PI/180), x, y,item,index);
                            itemY = itemY + this_.angle;
                        }
                    }else{
                        var itemY = 0;
                        for(var i=0;i<parseInt(arr.length/2)+1;i++){
                            console.log(arr[i]);
                            this_.drawDashLine(ctx, x - this_.space - this_.r+this_.r*Math.sin((90-itemY)*Math.PI/180), y-Math.tan(itemY*Math.PI/180)*this_.space+this_.r*Math.cos((90-itemY)*Math.PI/180), x, y,item,index);
                            itemY = itemY + this_.angle;
                        }
                        var itemY = this_.angle;
                        for(var i=0;i<parseInt(arr.length/2);i++){
                            this_.drawDashLine(ctx, x - this_.space - this_.r+this_.r*Math.sin((90-itemY)*Math.PI/180), y+Math.tan(itemY*Math.PI/180)*this_.space-this_.r*Math.cos((90-itemY)*Math.PI/180), x, y,item,index);
                            itemY = itemY + this_.angle;
                        }
                    }
                }

                if(index == 0){
                    ctx.moveTo(x,y);
                    x = x + this_.space;
                }
                //绘制非数组直线
                if(!((index-1)>=0 && this_.data[index-1] instanceof Array)){
                    this_.drawDashLine(ctx,x-this_.space, y, x, y,item,index);
                }
                ctx.moveTo(x + 2*this_.r,y);

                //绘制节点,画圆
                ctx.arc(x + this_.r,y,this_.r,0,2*Math.PI);
                this_.nodeArr.push({x:x + this_.r,y:y,data:item});
                ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                ctx.fill();

                //节点标题note
                ctx.textAlign ="center";
                ctx.textBaseline = "middle";
                ctx.font = "bold 10px 宋体";//字体大小
                ctx.fillStyle =item.noteColor;//字体颜色
                //节点的名称设置
                ctx.fillText(item.noteName,x + this_.r,y-this_.r-10);
                ctx.fillStyle = "black";//字体颜色
              
                x = x + 2*this_.r;
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(x,y);
            }else{//数组
                if(!(this_.data[index-1] instanceof Array)){//上一级不是数组
                    var itemY = 0;
                    if(item.length%2==0){//偶数
                        itemY = this_.angle;
                        var dataArr = item.slice(0,item.length/2).reverse();
                        for(var i=0;i<dataArr.length;i++){
                            this_.drawDashLine(ctx, x, y, x + this_.space, y-Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);
                            ctx.beginPath();
                            ctx.arc(x + this_.space, y-Math.tan(itemY*Math.PI/180)*(this_.space),this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x + this_.space,y:y-Math.tan(itemY*Math.PI/180)*(this_.space),data:dataArr[i]});

                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle =dataArr[i].isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x + this_.space, y-Math.tan(itemY*Math.PI/180)*(this_.space)-this_.r-10);
                            ctx.fill();
                            ctx.moveTo(x+this_.r,y);
                            itemY = itemY + this_.angle;
                        }
                        itemY = this_.angle;
                        var dataArr = item.slice(item.length/2,item.length);
                        for(var i=0;i<dataArr.length;i++){
                            this_.drawDashLine(ctx, x, y, x + this_.space, y+Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);
                            ctx.beginPath();
                            ctx.arc(x + this_.space, y+Math.tan(itemY*Math.PI/180)*(this_.space),this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x + this_.space,y:y+Math.tan(itemY*Math.PI/180)*(this_.space),data:dataArr[i]});

                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle =dataArr[i].isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x + this_.space, y+Math.tan(itemY*Math.PI/180)*(this_.space)+this_.r+10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                    }else{//奇数
                        var dataArr = item.slice(0,parseInt(item.length/2)+1).reverse();
                        for(var i=0;i<dataArr.length;i++){
                            this_.drawDashLine(ctx, x, y, x + this_.space, y-Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);

                            ctx.beginPath();
                            ctx.arc(x + this_.space, y-Math.tan(itemY*Math.PI/180)*this_.space,this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x + this_.space,y:y-Math.tan(itemY*Math.PI/180)*this_.space,data:dataArr[i]});

                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;;//填充颜色
                            ctx.fill();
                            ctx.stroke();
                            
                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x + this_.space, y-Math.tan(itemY*Math.PI/180)*this_.space-this_.r-10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                        itemY = this_.angle;
                        var dataArr = item.slice(parseInt(item.length/2)+1,item.length);
                        for(var i=0;i<dataArr.length;i++){
                            this_.drawDashLine(ctx, x, y, x + this_.space, y+Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);
                            ctx.beginPath();
                            ctx.arc(x + this_.space, y+Math.tan(itemY*Math.PI/180)*this_.space,this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x + this_.space,y:y+Math.tan(itemY*Math.PI/180)*this_.space,data:dataArr[i]});
                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x + this_.space, y+Math.tan(itemY*Math.PI/180)*this_.space+this_.r+10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                    }
                    ctx.stroke();

                    ctx.beginPath();
                    x = x+this_.space+this_.r;
                    ctx.moveTo(x,y);
                }else{//上一级是数组
                    if(item.length%2==0){//偶数
                        var itemY = this_.angle;
                        var dataArr = item.slice(0,item.length/2).reverse();
                        for(var i=0;i<dataArr.length;i++){
                            ctx.moveTo(x,y-Math.tan(itemY*Math.PI/180)*this_.space);
                            this_.drawDashLine(ctx, x, y-Math.tan(itemY*Math.PI/180)*this_.space,
                                x+this_.r+ this_.space, y-Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);
                            ctx.beginPath();
                            ctx.arc(x+ this_.space+this_.r, y-Math.tan(itemY*Math.PI/180)*this_.space,this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x+ this_.space+this_.r,y:y-Math.tan(itemY*Math.PI/180)*this_.space,data:dataArr[i]});

                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x+ this_.space+this_.r, y-Math.tan(itemY*Math.PI/180)*this_.space-this_.r-10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                        var itemY = this_.angle;
                        var dataArr = item.slice(item.length/2,item.length);
                        for(var i=0;i<dataArr.length;i++){
                            ctx.moveTo(x,y+Math.tan(itemY*Math.PI/180)*this_.space);
                            this_.drawDashLine(ctx, x, y+Math.tan(itemY*Math.PI/180)*this_.space,
                                x+this_.r+ this_.space, y+Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);
                            ctx.beginPath();
                            ctx.arc(x+ this_.space+this_.r, y+Math.tan(itemY*Math.PI/180)*this_.space,this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x+ this_.space+this_.r,y:y+Math.tan(itemY*Math.PI/180)*this_.space,data:dataArr[i]});

                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x+ this_.space+this_.r, y+Math.tan(itemY*Math.PI/180)*this_.space+this_.r+10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                    }else{//奇数
                        var itemY = 0;
                        var dataArr = item.slice(0,parseInt(item.length/2)+1).reverse();
                        for(var i=0;i<dataArr.length;i++){
                            ctx.moveTo(x,y-Math.tan(itemY*Math.PI/180)*this_.space);
                            this_.drawDashLine(ctx, x, y-Math.tan(itemY*Math.PI/180)*this_.space,
                                x+this_.r+ this_.space, y-Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);

                            ctx.beginPath();
                            ctx.arc(x+ this_.space+this_.r, y-Math.tan(itemY*Math.PI/180)*this_.space,this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x+ this_.space+this_.r,y:y-Math.tan(itemY*Math.PI/180)*this_.space,data:dataArr[i]});

                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x+ this_.space+this_.r, y-Math.tan(itemY*Math.PI/180)*this_.space-this_.r-10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                        var itemY = this_.angle;
                        var dataArr = item.slice(parseInt(item.length/2)+1,item.length);
                        for(var i=0;i<dataArr.length;i++){
                            ctx.moveTo(x,y+Math.tan(itemY*Math.PI/180)*this_.space);
                            this_.drawDashLine(ctx, x, y+Math.tan(itemY*Math.PI/180)*this_.space,
                                x+this_.r+ this_.space, y+Math.tan(itemY*Math.PI/180)*this_.space,dataArr[i],index);
                            
                            ctx.beginPath();
                            ctx.arc(x+ this_.space+this_.r, y+Math.tan(itemY*Math.PI/180)*this_.space,this_.r,0,2*Math.PI);
                            this_.nodeArr.push({x:x+ this_.space+this_.r,y:y+Math.tan(itemY*Math.PI/180)*this_.space,data:dataArr[i]});
                            //节点信息
                            ctx.textAlign ="center";
                            ctx.textBaseline = "middle";
                            ctx.font = "bold 10px 宋体";//字体大小
                            ctx.fillStyle = item.isExcuted===true?this_.config.excutedCirclePointColor:this_.config.circlePointColor;//填充颜色
                            ctx.fill();
                            ctx.stroke();

                            ctx.beginPath();
                            ctx.fillStyle = dataArr[i].noteColor;//字体颜色
                            ctx.fillText(dataArr[i].noteName,x+ this_.space+this_.r, y+Math.tan(itemY*Math.PI/180)*this_.space+this_.r+10);
                            ctx.fill();
                            itemY = itemY + this_.angle;
                        }
                    }
                    ctx.stroke();
                    ctx.beginPath();
                    x = x+this_.space+2*this_.r;
                    ctx.moveTo(x,y);
                }
            }
        });
};
/*
*因为canvas绘制的是矢量图，会出现模糊问题，使用下边的方法解决
* 参考链接：https://zhuanlan.zhihu.com/p/31426945
*/
opsDirectionMap.prototype.resolveVagueProblem=function(myCanvas) {
    var getPixelRatio = function (context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    };
    //画文字
    myCanvas.style.border = "1px solid silver";
    var context = myCanvas.getContext("2d");
    var ratio = getPixelRatio(context);
    myCanvas.style.width = myCanvas.width + 'px';
    myCanvas.style.height =myCanvas.height+ 'px';
    myCanvas.width = myCanvas.width * ratio;
    myCanvas.height = myCanvas.height * ratio;
    context.scale(ratio,ratio); 
};
  • html调用代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<canvas id="renderArea" width="600" height="100">浏览器不支持canvas</canvas>
<script type="text/javascript" src="ops-direction-map.js"></script>
<script>
     var demo=new opsDirectionMap({
        placeId:"renderArea",
        excutedCirclePointColor:"#009aff",//执行的节点的圆心颜色
        circlePointColor:"#ffffff",//未执行的的节点的圆心颜色
        data:[{
            noteName:'节点1',
            noteColor:'#000000', //说明文字的颜色
            isExcuted:true//如果这里为true，则其前边的线条为蓝色，圆点为实心，否为白色
        },{
            noteName:'节点2',
            noteColor:'#000000',
            isExcuted:true
        },[
            {
                noteName:'节点3-1',
                noteColor:'#000000',
                isExcuted:true
            },
            {
                noteName:'节点3-2',
                noteColor:'#000000',
                isExcuted:false
            }
        ],{
            noteName:'节点4',
            noteColor:'#000000',
            isExcuted:false
        },{
            noteName:'节点5',
            noteColor:'#000000',
            isExcuted:false
        },[
            {
                noteName:'节点6-1',
                noteColor:'#000000',
                isExcuted:false
            },{
                noteName:'节点6-2',
                noteColor:'#000000',
                isExcuted:false,
            }
        ],{
            noteName:'节点7',
            noteColor:'#000000',
            isExcuted:false
        }
        ]
    });
</script>
</body>
</html>

 

 

Programmer boy
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
canvas画流程图
wwyyzz1997的博客
02-23 3516
现有系统的流程图要重构，把之前的插件剔除。 找了很多画流程图的方式，但最后还是选择使用原生的canvas来画。 最重要的就是数据源，数据源给好了，画起来就很方便了。下边是部分测试数据源。 var res = { "Result": 0, "Error": "", "ResultString": "{\"items\":[{\"drawtype\":\"ellipse\",\"drawdata\":{\"data\":{\"color\":\"#000000\",\"style\":\"S
canvas与工作流
xiaodaoye的博客
11-12 797
canvas与工作流 简介     html的标签 用于图形的绘制，通过脚本 (通常是JavaScript)来完成，canvas简而言之就是个画布。上一篇文章我们提到工作流的一个重要组成部分：流程建模，也就是流程图； 上面这个就是用canvas绘制的流程图，流程图里的节点连线都是自由拖拽上去的。 使用canvas绘制流程步骤   &nbs...
html 基于 canvas 实现的一个截图小demo
12-13
写在最前 记得以前在人人上看到一个分享，讲解基于js的截图方案，详细的不记得了，只记得还挺有意思的貌似用了canvas？所以这次打算自己写一个分享给大家作者的思路。这只是一个很简陋的小demo如有bug请提issues。按照惯例po代码地址。 效果图 整体思路 设置开始/结束快捷键 开始后将DOM绘制成canvas来覆盖原始DOM界面 添加一张canvas模拟鼠标截图区域 添加一张canvas用来绘制鼠标截图区域对应的浏览器界面(从第一张canvas中截取) 保存截取的图像 1.设置开始/结束快捷键 由于快捷键可能导致的冲突故希望开始快捷键可以不限定快
基于canvas的流程图绘制程序
02-26
运用canvas和js，实现流程图的web绘制
Python初学6——程序的分支结构
lvzb2020615的博客
02-02 1964
目录 一、单分支结构（ if ） 二、二分支结构（ if-else ） 2.1 松散结构 2.2紧凑结构 三、多分支结构（ if-elif-else ） 四、条件判断及组合（ >、<、==、>=、<=、!=、and、or、not ） 五、程序的异常处理（ try-except-else-finally ） 5.1 异常处理方式1（ try-except ） 5.2 异常处理方式2（ try-except ） 5.3 异常处理方式3（ try-except-els.
canvas实现多图并以一图
10-10
该工具插件，只能在ie浏览器使用，canvas标签，在input中选择你多图所在的文件夹地址
vue-canvas:基于vue和canvas的流程图
05-15
Vue画布 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。
开源的HTML5 Canvas画图插件 - Literally Canvas
08-03
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1986529
【图文详解】canvas插件安装方法及常用插件推荐
weixin_42660856的博客
08-19 2146
canvas是一个基于云端的开源在线学习系统（LMS），使学校能够构建数字学习环境，以应对远程教学趋势。Canvas简化了教学，提高了学习效率，并消除了支持和发展传统学习技术的麻烦。它具有开放，直观的特点，通过所有数字工具和内容，简化老师的教学，让学生获得更简单的互联网学习体验。 在使用canvas的过程中，插件可以满足许多拓展的功能需求，今天，小九整理了全面的插件安装方法和canvas插件推荐~ Canvas 怎么安装插件？ 通过BigBlueButton为例，步骤如下： 登陆 Canvas 站点 通过
Canvas 绘制三段式审批流程图
qq_43225508的博客
01-30 1056
Canvas 绘制三段式审批流程图
一个基于canvas的移动端图片编辑器的实现
01-18
项目地址： https://github.com/xiaosu95/canvas_mobile_drag 点击查看demo（在移动端上查看） 该插件是一款脱离jq的移动端图片编辑器。可以应用在移动端H5页面或者微信小程序中。 插件实现的功能为可页面内初始化载入图片、手动添加手机相册内的图片、或者添加服务器端的图片（服务器端需要开启允许图片跨域）。拥有多种的编辑模式。支持操作画布内的所有图片和单独设置某一种图片的状态或者位置等。 插件操作模式支持手势放大、旋转；支持点击图片的四个角落拖拽放大或旋转或者。 支持照片exif自动矫正。许多手机用不同方向拍照时会导致图片在can
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
使用canvas实现一个vue弹幕组件功能
10-17
主要介绍了使用canvas实现一个vue弹幕组件功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
利用html2canvas将echarts多图表导出成一个图片
12-15
利用html2canvas插件，将一个或多个echarst导出到一个图片中
详解基于 Canvas 手撸一个六边形能力图
01-19
这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。   二、六边形绘制基础 六边形能力图有 6 个 六边形组成，那我们只要绘制出一个...
一个基于 html5 canvas 的流程图demo..zip
最新发布
02-12
html5开发
基于HTML5 canvas实现图片马赛克特效.zip
07-11
实现效果： 基于HTML5 canvas实现图片马赛克特效，非常不错的HTML5图片特效代码，支持自定义马赛克模糊 程度，挺不错的H5页面特效，当然还需要JS的支持。
基于canvas画一个太极图
04-29
基于canvas画一个太极图
原生js基于canvas实现一个简单的前端截图工具代码实例
10-16
主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用Canvas画一个流程图demo给我
03-11
好的，我可以回答这个问题。以下是一个简单的Canvas流程图demo的代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas流程图demo</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制开始节点 ctx.beginPath(); ctx.arc(100, 100, 30, 0, 2*Math.PI); ctx.stroke(); ctx.font = "20px Arial"; ctx.fillText("开始", 85, 105); // 绘制流程线 ctx.beginPath(); ctx.moveTo(130, 100); ctx.lineTo(270, 100); ctx.stroke(); // 绘制判断节点 ctx.beginPath(); ctx.arc(300, 70, 30, 0, 2*Math.PI); ctx.stroke(); ctx.font = "20px Arial"; ctx.fillText("判断", 285, 75); // 绘制流程线 ctx.beginPath(); ctx.moveTo(300, 100); ctx.lineTo(300, 170); ctx.stroke(); // 绘制结束节点 ctx.beginPath(); ctx.arc(270, 200, 30, 0, 2*Math.PI); ctx.stroke(); ctx.font = "20px Arial"; ctx.fillText("结束", 255, 205); // 绘制流程线 ctx.beginPath(); ctx.moveTo(240, 200); ctx.lineTo(130, 200); ctx.stroke(); </script> </body> </html> ``` 这是一个简单的流程图，包括开始节点、判断节点和结束节点，以及它们之间的流程线。您可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值