HTML5中的画布宽度和高度

是否可以修复HTML5 canvas元素的宽度和高度？

通常的方式如下：

<canvas id="canvas" width="300" height="300"></canvas>

解决方法

canvas DOM元素具有对应于height =“…”和width =“…”属性的.height和.width属性。将其设置为JavaScript代码中的数值，以调整画布大小。例如：

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

注意这会清除画布，虽然你应该跟随ctx.clearRect(0，0，ctx.canvas.width，ctx.canvas.height);以处理那些没有完全清除画布的浏览器。在大小更改后，您需要重新绘制要显示的任何内容。

进一步注意，高度和宽度是用于绘制的逻辑画布尺寸，并且不同于style.height和style.width CSS属性。如果不设置CSS属性，则将使用画布的内部大小作为其显示大小;如果您设置CSS属性，并且它们与画布尺寸不同，则您的内容将在浏览器中缩放。例如：

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

看到放大4倍的画布的this live example。