HTML5中的画布宽度和高度

是否可以固定HTML5

canvas

元素的宽度和高度

通常的方法如下：

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

---

canvasDOM元素具有与

height=“…”

和

width=“…”

属性相对应的

height和
width=“…”属性。在JavaScript代码中将它们设置为数值，以调整画布的大小。例如：

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

// 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';

请注意，这会清除画布，不过您应该遵循
ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）
来处理那些没有完全清除画布的浏览器。更改大小后，您需要重新绘制您想要显示的任何内容

进一步注意，高度和宽度是用于绘图的逻辑画布尺寸，与
style.height
和
style.width
CSS属性不同。如果不设置CSS属性，画布的固有大小将用作其显示大小；如果您确实设置了CSS属性，并且这些属性与画布维度不同，那么您的内容将在浏览器中缩放。例如：

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

// 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）
正文{背景：#eee；边距：1em；文本对齐：中间}
画布{背景：fff；边框：1px实心#ccc；宽度：400px；高度：160px}

显示重新绘制相同的抗锯齿线不会删除旧的抗锯齿线。
非常感谢！最后，我用以下代码解决了模糊像素问题：


添加“半像素”可以消除线条模糊。
画布有两种尺寸，即画布中像素的尺寸（backingstore或drawingBuffer）和显示尺寸。使用画布属性设置像素数。在HTML中

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

与此不同的是画布的CSS样式宽度和高度

在CSS中

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

或者使用JavaScript

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

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;
}

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

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

const ctx=document.querySelector（#c”）.getContext（“2d”）；
函数渲染（时间）{
时间*=0.001；
resizeCanvasToDisplaySize（ctx.canvas）；
ctx.fillStyle=“#DDE”；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.save（）；
常数间距=64；
常数大小=48；
横向常数=ctx.canvas.width/间距+1；
const down=ctx.canvas.height/间距+1；
常数s=数学sin（时间）；
常数c=数学cos（时间）；
for（设y=0；y

body{margin:0；}
画布{显示：块；宽度：100vw；高度：100vh；}
@uptreek如果你在画布上画一条线，它看起来应该会更清晰，就像是模糊的一样。通过将线条放在半像素上（比如说，50.5而不是50），你可以得到一条漂亮、干净的线条。这通常是在代码开始时使用ctx.translate（0.5，0.5）完成的，这样您就可以忘记它afterwards@Hazaart如果您想以不同的方式设置它们：
$（'#mycanvas'）.attr（{width:400，height:300}）.css（{width:800px，height:600px}）如果希望视觉大小与像素大小相同，请不要设置样式，仅设置属性。“如果希望视觉大小与像素大小相同，请不要设置样式，仅设置属性”，是否有此偏好的原因？如果我在画布中有很多对象，并且我想缩放/缩放，那么只重置css会快得多，不是吗？（而不是在所有对象中循环）.@Gamemorize:通过css缩放会让它变得模糊。但是，您可以通过上下文缩放和重绘之间的转换进行缩放，而无需更改每个对象的“大小”。非常感谢Thx。我现在明白CSS在做什么了。。。它将画布视为图像，缩放图像显然不如“重新绘制”图像好！此外，您现在可以使用画布上的样式“图像渲染：像素化”，而不是“模糊像素化放大”，至少在Chrome上是这样。我摆弄了摆弄你的小提琴来显示差异：最佳答案，这个片段应该是标准的DOM canvas方法。始终将画布维度与样式维度匹配对于HiDPI显示不是一个好主意，因为在这样的系统上，每个CSS px中都有1个以上的画布像素。盲目地将画布设置为与HiDPI显示相匹配是不好的，因为这样会占用大量内存，渲染速度会慢很多倍。您应该仔细选择何时使画布与HiDPI匹配，何时不匹配。对于大多数WebGL应用程序，不匹配比匹配更好，否则您的性能将非常差。