Canvas drawing workflow drawing node

This article mainly introduces using canvas to draw process nodes.

Before drawing, we need to prepare a node picture, for example: ; Okay, let’s start with the topic:

Add canvas tag in html :

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

Here you should pay attention to setting the width and height of the canvas tag, that is, setting the width and height of the canvas.

[Related course recommendations: JavaScript video tutorial]

Get the canvas object and initialize the canvas parameters

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

After drawing the effect As shown in the picture:

Get the node picture object

 //创建新的图片对象
 var _img = new Image();
  //指定图片的URL
 _img.src="node.png";

I am here to give an example to directly create the picture object. In the actual drawing process, the picture object can be obtained directly, because the dynamically created picture object is There is a time for the image to load.

Drawing node pictures

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

Here _img is the picture object obtained above, _x is the x coordinate of the picture to be drawn in the canvas, _y is the picture to be drawn In the _y coordinate in the canvas, _imgWidth is the width of the picture to be drawn, and _imgHeight is the width of the picture to be drawn.

In the actual application process, the position of the mouse is generally regarded as the x coordinate and y coordinate. The specific articles will be introduced later.

The renderings drawn:

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Canvas drawing workflow drawing node. For more information, please follow other related articles on the PHP Chinese website!