css建画布,使用CSS时画布会被拉伸，但使用“width/“height”属性时画布是正常的...

For elements, the CSS rules for width and height set the actual size of the canvas element that will be drawn to the page. On the other hand, the HTML attributes of width and height set the size of the coordinate system or 'grid' that the canvas API will use.

For example, consider this (jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d');

ctx.fillStyle = "red";

ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');

ctx2.fillStyle = "red";

ctx2.fillRect(10, 10, 30, 30);

canvas {

border: 1px solid black;

}

Both have had the same thing drawn on them relative to the internal coordinates of the canvas element. But in the second canvas, the red rectangle will be twice as wide because the canvas as a whole is being stretched across a bigger area by the CSS rules.

Note: If the CSS rules for width and/or height aren't specified then the browser will use the HTML attributes to size the element such that 1 unit of these values equals 1px on the page. If these attributes aren't specified then they will default to a width of 300 and a height of 150.