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

This article mainly shows you "how to set the width and height of canvas in html5", the content is simple and clear, hoping to help you solve your doubts, the following let the editor lead you to study and learn "how to set the width and height of canvas in html5" this article.

Canvas is a new component of HTML5, it is like a curtain, you can use JavaScript to draw a variety of charts, animations, and so on.

In the days without Canvas, drawings could only be implemented with Flash plug-ins, and pages had to interact with JavaScript and Flash. With Canvas, we no longer need Flash, we just use JavaScript to finish the drawing.

When I read the tutorial and wrote a hello world myself, something went wrong. Look at the following code:

Var oC = document.getElementById ('canvas1'); var ctx = oC.getContext ("2d"); ctx.moveTo (0,0); ctx.lineTo (200,200); ctx.stroke ()

The above code means to draw a straight line on a canvas with width and height of 200px. The line starts at (010) and ends at (200200).

However, the image drawn by the browser is:

When you look at this picture, why is it such a slope? It shouldn't be. It should be a diagonal.

Later, after a little lack of information, we know that when setting width and height for canvas tags, there are several ways and consequences:

The Canvas element defaults to wide 300px and high 150px. You can use the following methods to set its width and height:

Method 1:

1$ lt;/canvas >

Method 2: use HTML5 Canvas API operation

1 var canvas = document.getElementById ('id' to operate canvas)

2 canvas.width = 500

3 canvas.width = 500

If you set the width and height as follows, the Canvas element will be stretched from the original size to the set width and height:

Method 1: use CSS to stretch

1 # id {to operate canvas

2 width:1000px

3 height:1000px

4}

Also included in the interline style. That is, in the above example, stretching also occurs.

Method 2: using HTML5 Canvas API operation will be stretched

1 var canvas = document.getElementById ('id' to operate canvas)

2 canvas.style.width = "1000px"

3 canvas.style.height = "1000px"

Method 3: use jquery's $("# id"). Width (500); will be stretched

Other: the width and height of canvas cannot be expressed as a percentage. Canvas will display percentile values as numeric values

Therefore, from the above information, we can know that the reason is that the code in my example above will stretch the width and height of the canvas, making the image inconsistent with the expected image.

Now I've rewritten a code example that correctly sets the width and height of the canvas:

Your browser does not support the canvas element. Var c = document.getElementById ("myCanvas"); var cxt = c.getContext ("2d"); cxt.moveTo (0,0); cxt.lineTo (200,200); cxt.stroke (). These are all the contents of the article "how to set the width and height of canvas 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!

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.