How to draw process nodes with canvas

Editor to share with you how to use canvas to draw process nodes, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Add the canvas tag in the html:

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

Get canvas objects and initialize canvas parameters

Var _ canvas= document.getElementById ("canvasId"); var _ height = _ canvas.height;// get the canvas height var _ width = _ canvas.width;// get the canvas width Var ctx = _ canvas.getContext ('2d'); / / draw a rectangle the size of the canvas in order to have a nice small border ctx.clearRect (0,0, _ width, _ height); / * draw the background line of the canvas * / / set the linewidth ctx.lineWidth = 0.1 / / draw the longitudinal background line for (var I = 1; I < _ width / 15; iTunes +) {ctx.beginPath (); ctx.moveTo (I * 15,0); ctx.lineTo (I * 15, _ height); ctx.stroke ();} / / draw the horizontal background line for (var I = 1; I < _ height / 15; ibackground +) {ctx.beginPath (); ctx.moveTo (0, I * 15); ctx.lineTo (_ width, I * 15) Ctx.stroke ();}

Get node picture object

/ / create a new picture object var _ img = new Image (); / / specify the URL _ img.src= "node.png" of the picture

Here, in order to give an example to create a picture object directly, you can get the picture object directly in the actual drawing process, because the dynamic creation of picture object has a time to load the picture.

Draw a node picture

Ctx.drawImage (_ img,_x,_y,_imgWidth, _ imgHeight)

Where _ img is the image object obtained above, _ x is the x coordinate of the picture to be drawn on the canvas, _ y is the _ y coordinate of the picture to be drawn on 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 process of practical application, the position of the mouse is generally regarded as x-coordinate and y-coordinate, which will be described in a later article.

The above is all the content of the article "how to draw process nodes with canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!