canvas绘制工作流之绘制节点

孤人 提交于 2021-01-24 00:17:41

   上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流;这篇文章主要介绍用canvas绘制流程节点。

  绘制前我们需要先准备一张节点图片,例如:;好了,正题开始:

  1. html中添加canvas标签:
<canvas id="canvasId" width = "800" height="600" style="border:1px solid black;  margin-left: 1px;"></canvas>

这里要注意设置canvas标签的宽度跟高度,也就是要设置画布的宽度跟高度。

  1. 获取画布对象并初始化画布参数
var _canvas= document.getElementById(“canvasId”);

var _height = _canvas.height;//获取画布高度

var _width = _canvas.width;//获取画布宽度

Var ctx =_canvas.getContext('2d');

//画个画布大小的长方形,目的是为了有个好看的小边框框
ctx.clearRect(0, 0, _width, _height);

/*绘制画布的背景线*/
//设置线宽
ctx.lineWidth  = 0.1;
//绘制纵向背景线
for(var i = 1; i < _width / 15; i++) {
  ctx.beginPath();
  ctx.moveTo(i * 15, 0);
  ctx.lineTo(i * 15, _height);
  ctx.stroke();
}
//绘制横向背景线
for(var i = 1; i < _ height / 15; i++) {
  ctx.beginPath();
  ctx.moveTo(0, i * 15);
  ctx.lineTo(_width, i * 15);
  ctx.stroke();
}

 

绘制完效果如图:

  1. 获取节点图片对象
    //创建新的图片对象
    
     var _img = new Image();
    
      //指定图片的URL
    
     _img.src="node.png";

            我这里为了举个例子直接创建图片对象,实际绘制过程中可以直接获取图片对象,因为动态创建图片对象是有个图片加载的时间。

  1. 绘制节点图片
ctx.drawImage(_img,_x,_y,_imgWidth, _imgHeight);

    这里_img是上面获取到的图片对象,_x是图片要绘制在画布中的x坐标,_y是图片要绘制在画布中的_y坐标,_imgWidth是要将图片绘制的宽度,_imgHeight是要将 图片绘制的宽度。

    实际应用过程中,一般都会当去鼠标的位置当做x坐标跟y坐标,具体的后面文章会介绍到。

       绘制的效果图:

   节点下面的文字后面文章会详细讲到怎么绘制。

  每天get一点点,每天成长一点点,好了,今天就到这里。

        

原文出处:https://www.cnblogs.com/weibpm/p/11862873.html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!