怎么用canvas绘制流程节点

怎么用canvas绘制流程节点

小编给大家分享一下怎么用canvas绘制流程节点,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在html中添加canvas标签:

怎么用canvas绘制流程节点

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

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

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

var_canvas=document.getElementById(“canvasId”);var_height=_canvas.height;//获取画布高度var_width=_canvas.width;//获取画布宽度Varctx=_canvas.getContext('2d');//画个画布大小的长方形,目的是为了有个好看的小边框框ctx.clearRect(0,0,_width,_height);/*绘制画布的背景线*///设置线宽ctx.lineWidth=0.1;//绘制纵向背景线for(vari=1;i<_width/15;i++){ctx.beginPath();ctx.moveTo(i*15,0);ctx.lineTo(i*15,_height);ctx.stroke();}//绘制横向背景线for(vari=1;i<_height/15;i++){ctx.beginPath();ctx.moveTo(0,i*15);ctx.lineTo(_width,i*15);ctx.stroke();}

获取节点图片对象

//创建新的图片对象var_img=newImage();//指定图片的URL_img.src="node.png";

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

绘制节点图片

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

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

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

以上是“怎么用canvas绘制流程节点”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注恰卡编程网行业资讯频道!

发布于 2021-12-22 21:55:34
收藏
分享
海报
0 条评论
39
上一篇:Java类的错误怎么解决 下一篇:web开发中canvas是什么意思
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码