javascript 如何在不缩放内容的情况下更改 html5 画布的尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3293727/
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
how to change dimensions of html5 canvas without it scaling content
提问by Toad
I init my canvas like this:
我像这样初始化我的画布：
<canvas id="canvasDiv" width="20" height="20"></canvas>
and somewhere in the code I want to resize it to it's final size:
在代码中的某处，我想将其调整为最终大小：
var canvas = document.getElementById("canvasDiv");
canvas.style.width = 200;
canvas.style.height = 100;
However, any pixel I plot on my canvas is scaled (so it's not 1 pixel anymore).
但是，我在画布上绘制的任何像素都会被缩放（因此不再是 1 像素）。
How does one change the dimensions of a canvas without this scaling effect? (So programmatically)
如果没有这种缩放效果，如何更改画布的尺寸？（所以以编程方式）
回答by sunetos
I think you just need to also set its width & height properties:
我认为你只需要设置它的宽度和高度属性：
canvas.width = 200;
canvas.height = 100;
