The difference between width and height of H5 canvas and width and height of style is h5canvas.

The difference between width and height of H5 canvas and width and height of style is h5canvas.

Width height attribute of Canvas

 

 

1. When the width height attribute is used, the display will not be stretched normally.

 

<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:

 

2. When a style is used, the image is stretched (deformed ),

 

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

　　

Running Effect

How to Understand ??? You can understand this ----

Canvas is a Canvas and a Canvas, which is equivalent to a container. Drawing/jobs are carried out on the Canvas,

The default width and height of the canvas and canvas are 300*150. When the width and height of the canvas are the same, the image will not be stretched. When the width and height of the canvas are different, the image is stretched (deformed ).

1. The width and height attributes are used to set the width and height of the canvas and canvas,

For example, width = "300" height = "300" means that the width and height of the canvas are 300*300, and the width and height of the canvas are also 300*300, the diagonal image of the job's 300*300 won't be stretched.

 

2. In the style, only the width and height of the canvas are set. The width and height of the canvas are still 300*150 by default,

(For example) Therefore, only a part of the diagonal image of the job's 300*300 is painted on the paper, as shown below:

Btw won't leave the canvas blank, so the drawing paper and the image will be stretched to the same size as the canvas. In this example, the width of the canvas and the width of the canvas are both 30, and the height is half of the canvas. Therefore, you only need to double the height of the canvas. The so image is also stretched and thin, and the X direction remains unchanged, the size of the transformed image is doubled in the Y direction.

A summary of referencing http://www.cnblogs.com/JamKong/p/4987163.html

For the problem of Canvas width and height settings in HTML5, the default Canvas Element width is PX and the height is PX. You can use the following method to set its width and height (not to be stretched): Method 1: <canvas width = "500" height = "500"> </canvas> Method 2: Use the HTML5 Canvas API to operate OK var canvas = document. getElementById ('Id of the canvas to be operated '); canvas. width = 500; canvas. width = 500; if you use the following method to set the width and height, the Canvas element will be stretched from the original size to the configured width and height: Method 1: using CSS will be stretched # id of the canvas to be operated {width: 1000px; height: 1000px;} Method 2: using the HTML5 Canvas API will be stretched var canvas = document. getElementB YId ('Id of the canvas to be operated '); canvas. style. width = "1000px"; canvas. style. height = "1000px"; Method 3: Use jquery's $ ("# id "). width (500); Other: the width and height of the canvas cannot be expressed in percentage. Canvas displays the hundreds of values as numerical values.