How to draw multiple straight lines with canvas tags in Html5

This article is about how to draw multiple straight lines with canvas tags in Html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The following example is to draw multiple lines with canvas tags

The code is as follows:

Index_three

Your browser does not support canvas tags.

/ / get Canvas object (canvas)

Var canvas = document.getElementById ("myCanvas")

/ / simply detect whether the current browser supports Canvas objects to avoid prompting syntax errors in some browsers that do not support html5

If (canvas.getContext) {

/ / get the corresponding CanvasRenderingContext2D object (brush)

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

/ / Color of the line

Ctx.strokeStyle= "# FF9933"

/ / width pixels of the line

Ctx.lineWidth=10

/ / the two-level shape of the line

Ctx.lineCap= "round"

/ / notice that the coordinate system of the Canvas is: the upper left corner of the Canvas canvas is the origin (0P0), right Abscissa, downward ordinate, in pixels (px).

/ / start a new drawing path

Ctx.beginPath ()

/ / defines the starting point coordinate of the line as (10 ~ (10))

Ctx.moveTo (50,50)

/ / define the end coordinates of the line as (50 ~ 10)

Ctx.lineTo (350250)

Ctx.moveTo (50,240)

Ctx.lineTo (360,60)

Ctx.moveTo (50,200)

Ctx.lineTo (300,40)

/ / draw a straight line along the path of the order of coordinate points

Ctx.stroke ()

/ / close the current drawing path

Ctx.closePath ()

}

Thank you for reading! This is the end of this article on "how to draw multiple straight lines with canvas tags in Html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!