HTML5中的画布宽度和高度

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。宽度,ctx.canvas.height);来处理那些没有完全清除画布的浏览器。你需要重新绘制你想要显示的任何内容在大小改变后。

进一步注意，高度和宽度是用于绘图的逻辑画布尺寸，与样式不同。身高和风格。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>

2011-02-08 22:06:56

非常感谢!最后，我用下面的代码解决了像素模糊的问题:

加上“半像素”就可以消除线条的模糊。

2012-06-18 12:45:44

一个画布有两种尺寸，一个是画布中像素的尺寸(它是backingstore或drawingBuffer)，另一个是显示尺寸。像素的数量是使用canvas属性设置的。在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";

让画布变成1x1像素的最好方法是总是使用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;
}

为什么这是最好的方法?因为它在大多数情况下都可以工作，而不需要更改任何代码。

这是一个全窗口画布:

这是一个画布，作为段落中的浮动

这是一个相当大的控制面板中的画布

这是一个画布作为背景

因为我没有设置属性，所以在每个示例中唯一改变的是CSS(就画布而言)

注:

不要在画布元素上设置边框或填充。计算要从元素的维数中减去的大小是很麻烦的

2017-04-12 08:51:07

HTML5中的画布宽度和高度

推荐文章

最新文章

标签