canvas绘制工作流之绘制节点

最新推荐文章于 2024-04-24 09:55:20 发布

weibpm

最新推荐文章于 2024-04-24 09:55:20 发布

阅读量775

点赞数

分类专栏：工作流引擎文章标签： canvas 工作流绘制工作流引擎

本文链接：https://blog.csdn.net/xiaodaoye/article/details/103075978

版权

本文主要探讨如何利用canvas进行工作流节点的绘制。首先介绍准备节点图片，然后在html中添加canvas标签并设置尺寸。接着获取画布对象并初始化参数，再获取节点图片对象。最后讲解如何在画布上绘制节点图片，并预告了后续关于节点文字绘制的内容。

摘要由CSDN通过智能技术生成

上一篇我们介绍了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;

关注

专栏目录