本文摘自PHP中文网,作者angryTom,侵删。
这篇文章主要介绍用canvas绘制流程节点。绘制前我们需要先准备一张节点图片,例如:;好了,正题开始:
在html中添加canvas标签:
1 |
|
这里要注意设置canvas标签的宽度跟高度,也就是要设置画布的宽度跟高度。
【相关课程推荐:JavaScript视频教程】
获取画布对象并初始化画布参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
绘制完效果如图:
获取节点图片对象
1 2 3 4 |
|
我这里为了举个例子直接创建图片对象,实际绘制过程中可以直接获取图片对象,因为动态创建图片对象是有个图片加载的时间。
绘制节点图片
1 |
|
这里_img是上面获取到的图片对象,_x是图片要绘制在画布中的x坐标,_y是图片要绘制在画布中的_y坐标,_imgWidth是要将图片绘制的宽度,_imgHeight是要将 图片绘制的宽度。
实际应用过程中,一般都会当去鼠标的位置当做x坐标跟y坐标,具体的后面文章会介绍到。
绘制的效果图:
本文来自 js教程 栏目,欢迎学习!
以上就是canvas绘制工作流之绘制节点的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5 canvas标签是什么意思?canvas标签使用方法介绍
使用html5 canvas封装一个echarts实现不了的饼图
基于 html5 canvas 的 3d 渲染引擎界面以及吸附等效果的运用
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者