javascript 设置画布宽度 100% 和 max-width
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25683028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting canvas width 100% and max-width
提问by Alex Velickiy
I want to set width 100% and limit it with max-width to my canvas element. Regardless of canvas width I want to have static canvas height. But when I set it with css, it seems that browser draws canvas with standard siza and rezises canvas to 100% width and proporionaly it resises height. But the worst is that it scales the picture inside the canvas. I also tried to set css width property of canvas from JS but it led to the same result.
我想将宽度设置为 100% 并使用 max-width 将其限制为我的画布元素。无论画布宽度如何，我都希望拥有静态画布高度。但是当我用 css 设置它时，似乎浏览器使用标准 siza 绘制画布并将画布调整为 100% 宽度并按比例调整高度。但最糟糕的是它会缩放画布内的图片。我还尝试从 JS 设置画布的 css width 属性，但它导致了相同的结果。
<canvas id="myCanvas" width="100%" height="630px"></canvas>
makes canvas with 100px width and 630px height
使画布宽度为 100 像素，高度为 630 像素
<canvas id="myCanvas"></canvas>
and css
和CSS
#myCanvas {
width:100%;
height:630px;
}
makes canvas 100% width but proportionaly resizes height and scales an image inside canvas. Setting css with JS does the same.
使画布宽度为 100%，但按比例调整高度并缩放画布内的图像。使用 JS 设置 css 也是如此。
How am I supposed to do this?
我该怎么做？
回答by Wayne
The drawing API dimensions for the canvas element does not need to match the CSS dimensions that it occupies on the screen. This allows one to do sub pixel graphics if they so desired, (to create smooth motion with anti aliasing). So the canvas width of 100% means nothing it wants the number of pixels it should be using, I believe you get the default width of 400 as if no width was used at all. However it can be changed with javascript to any width you would like.
canvas 元素的绘图 API 尺寸不需要与它在屏幕上占据的 CSS 尺寸相匹配。这允许人们根据需要进行亚像素图形（以创建具有抗锯齿的平滑运动）。所以画布宽度为 100% 意味着它不想要它应该使用的像素数，我相信你得到 400 的默认宽度，就好像根本没有使用宽度一样。但是，它可以使用 javascript 更改为您想要的任何宽度。
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = $(window).width();
canvas.height = 630;
Or to do anti-aliasing.
或者做抗锯齿。
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = $(window).width()*2;
canvas.height = 630*2;
Set the canvas width to a number higher that the space it has on the screen. Each canvas pixel only takes up 1/2 an actual pixel and movement looks more video like.
将画布宽度设置为比屏幕上的空间大的数字。每个画布像素仅占实际像素的 1/2，运动看起来更像视频。
Update added jsfiddle
更新添加的 jsfiddle
<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);
The width attrib will set both the css and the API width if they are not set by other means, but 100% width is not valid for the API so the API falls back to its default width of 400px.
如果没有通过其他方式设置 css 和 API 宽度，则宽度属性将同时设置 css 和 API 宽度，但 100% 宽度对 API 无效，因此 API 会回退到其默认宽度 400px。
Per your question, you need to use both the CSS width of 100% and set the canvas API with or to whatever number of pixels that will be? jquery $(window).width() gives us the pixel count of 100%.
根据您的问题，您需要同时使用 100% 的 CSS 宽度并将画布 API 设置为使用或设置为任意数量的像素？jquery $(window).width() 为我们提供了 100% 的像素数。
