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

Question

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

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

制作宽度为100px，高度为630px的画布

<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宽度，并将canvas API设置为或设置为多少像素？ jQuery $（window）.width（）给我们的像素数为100％。