设置画布宽度 100% 和最大宽度

Question

我想将宽度设置为 100% 并使用 max-width 将其限制为我的画布元素。无论画布宽度如何，我都希望拥有静态画布高度。但是当我用 css 设置它时，浏览器似乎以标准尺寸绘制画布，并将画布调整为 100% 宽度，并按比例调整高度。但最糟糕的是它会缩放画布内的图片。我还尝试从 JS 设置画布的 css 宽度属性，但它导致了相同的结果。

<canvas id="myCanvas" width="100%" height="630px"></canvas>

制作宽度为 100 像素、高度为 630 像素的画布

<canvas id="myCanvas"></canvas>

和CSS

#myCanvas {
    width:100%;
    height:630px;
}

使画布宽度为 100%，但按比例调整高度并缩放画布内的图像。用JS设置css也是一样的。

我该怎么做？

Answer 1

canvas 元素的绘图 API 尺寸不需要与其在屏幕上占据的 CSS 尺寸相匹配。如果需要的话，这允许人们制作亚像素图形（通过抗锯齿创建平滑的运动）。因此，画布宽度 100% 并不意味着它想要它应该使用的像素数，我相信您会得到 400 的默认宽度，就好像根本没有使用宽度一样。不过，可以使用 javascript 将其更改为您想要的任何宽度。

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width(); 
canvas.height = 630;

或者做抗锯齿。

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width()*2; 
canvas.height = 630*2;

将画布宽度设置为大于屏幕上空间的数字。每个画布像素仅占实际像素的 1/2，并且运动看起来更像视频。

更新添加了jsfiddle

http://jsfiddle.net/juaovd7o/

<canvas id="myCanvas" width="284px" height="120px">hello</canvas>
<canvas id="myCanvas2" style="width:284px;height:120px;"></canvas>
<img src="http://whitedove-coding.com/static/whitedove-829.png" id="dove">

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(0, 0, 284, 120);
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();
 var canvas2 = document.getElementById('myCanvas2');
      canvas2.width=568;
      canvas2.height=240;
      var context2 = canvas2.getContext('2d');
      context2.beginPath();
      context2.rect(0, 0, 568, 240);
      context2.lineWidth = 4;
      context2.strokeStyle = 'black';
      context2.stroke();
var img=document.getElementById("dove");
      context2.drawImage(img,0,0);
      context.drawImage(img,0,0);

如果未通过其他方式设置，宽度属性将同时设置 css 和 API 宽度，但 100% 宽度对于 API 无效，因此 API 会回退到其默认宽度 400px。

根据您的问题，您需要使用 100% 的 CSS 宽度，并将画布 API 设置为任意数量的像素？jquery $(window).width() 给我们 100% 的像素数。