Detailed explanation of the difference between width, height and style in H5 canvas

Recently, I encountered a small problem when learning canvas properties, which is the width and height of canvas. I finally solved it by searching for relevant information, so I will share the solution process with everyone. I won’t say much below, let’s take a look at the details. Let’s introduce

1. When using the width height attribute, the display will not be stretched normally; as follows:

 <canvas id=mycanvas width=300 height=300>The browser does not support Canvas, please upgrade or use another browser! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx .stroke();</script>

The running effect is as follows, which is a diagonal line

2. When using style, the image will be stretched (deformed).

 <style> #mycanvas { width: 150px; height: 150px; } </style>

Operation effect

Canvas is a drawing board and a piece of drawing paper. The drawing board is equivalent to a container. Drawing/work is done on the drawing paper.

The default width and height of the drawing board and drawing paper are 300*150. When the width and height of the drawing paper and the drawing board are equal, the image will not be stretched. When the width and height of the drawing paper and the drawing board are different, the image will be stretched (deformed). .

1. The width and height attributes are to set the width and height of the drawing board and drawing paper.

For example: width=300 height=300 means that the width and height of the drawing board are 300*300, and the width and height of the drawing paper are also 300*300. The 300*300 diagonal image of the job will not be stretched.

2. Only the width and height of the drawing board are set in the style. The width and height of the drawing paper are still the default value of 300*150.

(Take the above picture as an example) Therefore, only part of the 300*300 diagonal image you are working on is drawn on the drawing paper, as follows:

Btw, the drawing paper will not leave the drawing board empty, so the drawing paper and the image must be stretched to the same size as the drawing board. In this example, the width of the drawing paper and the width of the artboard are both 30, and the height is half of the artboard, so you only need to stretch the height by twice, so the image is also stretched and thinned, the X direction remains unchanged, and the Y The direction is doubled, so we get the deformed picture.

Regarding the width and height settings of Canvas in HTML5

The Canvas element is 300px wide and 150px high by default. To set its width and height, you can use the following method (it will not be stretched):

Method one:

<canvas width=500 height=500></canvas>

Method 2: Use HTML5 Canvas API to operate OK

var canvas = document.getElementById('the id of the canvas you want to operate');

canvas.width = 500;

canvas.width = 500;

If the width and height are set by the following method, the Canvas element will be stretched from the original size to the set width and height:

Method 1: Using CSS will stretch the

#To operate the id of the canvas{

width:1000px;

height:1000px;

｝

Method 2: Operations using the HTML5 Canvas API will be stretched

var canvas = document.getElementById('the id of the canvas you want to operate');

canvas.style.width = 1000px;

canvas.style.height = 1000px;

Method 3: Using jquery’s $(#id).width(500); will be stretched

Others: The width and height of canvas cannot be expressed as percentages. canvas will display the percentage as a numerical value

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message for communication. Thank you for your support of VeVb Wulin Network.