Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use canvas to draw the process steps, the article is very detailed, has a certain reference value, interested friends must read it!

Brief introduction

Html tags are used for drawing graphics, which are done through scripts (usually JavaScript), and canvas is simply a canvas. In the last article, we mentioned an important part of workflow: process modeling, that is, flowchart.

The above is the flow chart drawn with canvas, and the nodes in the flow chart are dragged freely.

Drawing process steps using canvas

So how does canvas draw the flow chart? first of all, canvas is only the label of html, then we have to drag and draw process nodes with the help of other development languages, usually we use JavaScript to complete the drawing. So what exactly should we do:

1. Define the canvas canvas

two。 Get canvas instance

Var c=document.getElementById ("myCanvas")

Var ctx=c.getContext ("2d")

3. Draw using the canvas instance method

I am here to draw the nodes in the form of pictures, to put it simply, to make a good picture of the nodes first, such as this, why do you use this way, because it looks good.

Then use the canvas method ctx.drawImage (img,10,10); draw the node picture. When drawing a picture, you need to determine the drawing size and coordinates of the picture. Canvas is a two-dimensional grid with coordinates; so we can place the nodes in the location we specify.

After the above three steps, we have initially drawn the nodes, which can be regarded as another pig's foot towards success. Of course, this is only the beginning to realize the real flow chart drawing, but don't be discouraged. If you do it step by step, you will feel more fulfilling.

Some students here may want to ask, why use canvas to draw flowcharts, why not use others; if you ask this question, it means your cerebellum is active, , just kidding; I used flash to draw flowcharts before, but later, because of the browser's support for flash, people had to bow under the eaves. After seeing SVG, this is also quite powerful, svg and canvas have their own advantages, and finally decided to use canvas to draw the flow chart.

The above is all the content of the article "how to draw the process steps using canvas". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.