HTML5中的画布宽度和高度

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

通常的方法如下：

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

Answer 1

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倍的画布的实例 。

 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> 

Answer 2

非常感谢你！ 最后，我解决了这个代码模糊的像素问题：

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

加上“半像素”技巧来消除线条。

Answer 3

画布有两种尺寸，画布中的像素尺寸（它是backingstore或drawingBuffer）和显示尺寸。 像素的数量是使用画布属性设置的。 在HTML中

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

或在JavaScript中

 someCanvasElement.width = 400; someCanvasElement.height = 300; 

独立于画布的CSS样式的宽度和高度

在CSS中

 canvas { /* or some other selector */ width: 500px; height: 400px; } 

或在JavaScript中

 canvas.style.width = "500px"; canvas.style.height = "400px"; 

可以说，制作1×1像素的画布最好的办法是总是使用CSS来选择大小，然后写一小段JavaScript来使像素数量与这个大小相匹配。

 function resizeCanvasToDisplaySize(canvas) { // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // If it's resolution does not match change it if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; return true; } return false; } 

为什么这是最好的方式？ 因为它在大多数情况下工作，无需更改任何代码。

这是一个完整的窗口画布：

 const ctx = document.querySelector("#c").getContext("2d"); function render(time) { time *= 0.001; resizeCanvasToDisplaySize(ctx.canvas); ctx.fillStyle = "#DDE"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.save(); const spacing = 64; const size = 48; const across = ctx.canvas.width / spacing + 1; const down = ctx.canvas.height / spacing + 1; const s = Math.sin(time); const c = Math.cos(time); for (let y = 0; y < down; ++y) { for (let x = 0; x < across; ++x) { ctx.setTransform(c, -s, s, c, x * spacing, y * spacing); ctx.strokeRect(-size / 2, -size / 2, size, size); } } ctx.restore(); requestAnimationFrame(render); } requestAnimationFrame(render); function resizeCanvasToDisplaySize(canvas) { // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // If it's resolution does not match change it if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; return true; } return false; } 

 body { margin: 0; } canvas { display: block; width: 100vw; height: 100vh; } 

 <canvas id="c"></canvas>