如何使用canvas绘制工作流的节点

这篇文章主要介绍了如何使用canvas绘制工作流的节点，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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

 在html中添加canvas标签：

<canvas id="canvasId" width = "800" height="600" style="border:1px solid black;  margin-left: 1px;"></canvas>

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

 获取画布对象并初始化画布参数

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();}

绘制完效果如图：

 获取节点图片对象

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

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

 绘制节点图片

ctx.drawImage(_img,_x,_y,_imgWidth, _imgHeight);

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

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

绘制的效果图：

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用canvas绘制工作流的节点”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!