HTML5 中的画布宽度和高度

是否可以固定 HTML5 的宽度和高度canvas元素？

通常的方法如下：

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

The canvasDOM 元素有.height and .width对应的属性height="…" and 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 and style.widthCSS 属性。如果不设置 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';

See 这个活生生的例子放大 4 倍的画布。

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle   = '#eff';

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>