canvas绘制工作流之绘制节点


本文摘自PHP中文网,作者angryTom,侵删。

这篇文章主要介绍用canvas绘制流程节点。

绘制前我们需要先准备一张节点图片,例如:1863855-20191114215201443-1337255129.png;好了,正题开始:

在html中添加canvas标签:

1

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

这里要注意设置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

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();

}

绘制完效果如图:

1863855-20191114215409966-98228771.png获取节点图片对象

1

2

3

4

//创建新的图片对象

var _img = new Image();

 //指定图片的URL

_img.src="node.png";

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

绘制节点图片

1

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

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

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

绘制的效果图:

1863855-20191114215537197-1048786149.png

本文来自 js教程 栏目,欢迎学习!

以上就是canvas绘制工作流之绘制节点的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html5 canvas标签是什么意思?canvas标签使用方法介绍

canvas实现高阶贝塞尔曲线

html5中怎么做五角星

使用html5 canvas封装一个echarts实现不了的饼图

关于canvas的一个实例教程--刮刮乐

html5在canvas中实现自定义路径动画详解

canvas图片跨域会遇到的问题及解决方法总结

基于 html5 canvas 的 3d 渲染引擎界面以及吸附等效果的运用

如何利用html5 canvas旋转图片?(实例演示)

canvas怎么使用

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...