上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流;这篇文章主要介绍用canvas绘制流程节点。
绘制前我们需要先准备一张节点图片,例如:;好了,正题开始:
1.在html中添加canvas标签:
<canvas id="canvasId" width = "800" height="600" style="border:1px solid black; margin-left: 1px;"></canvas>
这里要注意设置canvas标签的宽度跟高度,也就是要设置画布的宽度跟高度。
2.获取画布对象并初始化画布参数
var _canvas= document.getElementById(“canvasId”);
var _height = _canvas.height;