How to use canvas to draw a diagonal line in html5

Editor to share with you how to use canvas in html5 to draw a diagonal, I believe 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 know it!

In canvas, when width and height are written on canvas, it is the actual artboard size of canvas. By default, width is 300px, and height is 150px.

When writing css styles in style, widht and height are the actual display sizes.

Now take drawing a diagonal line with canvas as an example:

The code is as follows:

Canvas

_ window.onload = function () {

GetCanvas ()

}

/ / canvase drawing

Function getCanvas () {

/ / get the canvas element and its drawing context

Var canvas = document.getElementById ('canvasId')

Var context = canvas.getContext ('2d')

/ / create a path with an absolute signpost

Context.beginPath ()

Context.moveTo (0200)

Context.lineTo (2007.0)

/ / draw this bar to canvas first

Context.stroke ()

}

The canvas drawing board is 20000square, and the drawing is displayed diagonally from (0200) to (200jin0).

But the figure shows a rectangle of 400 to 200, and it also shows diagonals.

The above is all the content of the article "how to use canvas to draw a diagonal line in html5". 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!