小编给大家分享一下怎么用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绘制流程节点”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。