如何将百分比宽度放入 html 画布（无 css）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18679414/
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 put percentage width into html canvas (no css)
提问by Anthony Elliott
I have an image and have overlaid a canvas on top of it so that I can draw 'on' the image without modifying the image itself.
我有一个图像并在它上面覆盖了一个画布，这样我就可以在不修改图像本身的情况下在图像上绘制。
<div class="needPic" id="container">
<img id="image" src=""/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>
I can specify the width and height in pixels in the above canvas line and it works great, however I need this to dynamically sized based on screen size (has to work on small smartphones as well as tablets). When I try to put the percentage in as shown above, it interprets it as pixels. Thus, the canvas will be 70px wide and 60 px tall.
我可以在上面的画布行中以像素为单位指定宽度和高度，并且效果很好，但是我需要根据屏幕大小动态调整大小（必须在小型智能手机和平板电脑上工作）。当我尝试按如上所示输入百分比时，它会将其解释为像素。因此，画布将是 70 像素宽和 60 像素高。
For some reason I can't size the canvas in the CSS so looks like I have to do it in the html. To clarify, when I try to specify the canvas dimensions in the CSS they don't actually change the size of the canvas. It seems as if the image is interfering in some way.
出于某种原因，我无法在 CSS 中调整画布的大小，所以看起来我必须在 html 中进行调整。澄清一下，当我尝试在 CSS 中指定画布尺寸时，它们实际上并没有改变画布的大小。似乎图像以某种方式干扰。
Any help would be appreciated.
任何帮助，将不胜感激。
Update:If I do <canvas id="sketchpad" style="width:70%;height:60%;"></canvas>then it defaults to a height of 150px and width of 300px (regardless of device) and then stretchesthe canvas to fit the div. I set the div to be 60% width and 60% height in the css, thus the canvas stretches to fill that. I confirmed this by logging the canvas.width vs canvas.style.width -- canvas.width was 300px and canvas.sytle.width was '60%' (from the parent div). This causes some really strange pixelation and drawing effects...
更新：如果我这样做，<canvas id="sketchpad" style="width:70%;height:60%;"></canvas>那么它默认为 150 像素的高度和 300 像素的宽度（无论设备如何），然后拉伸画布以适合 div。我在 css 中将 div 设置为 60% 的宽度和 60% 的高度，因此画布会拉伸以填充它。我通过记录 canvas.width 与 canvas.style.width 来确认这一点——canvas.width 为 300px，canvas.sytle.width 为“60%”（来自父 div）。这会导致一些非常奇怪的像素化和绘图效果......
回答by
You need to set the size of the canvas in pixels or you will not only reduce the quality of its content but if you want to draw on it the mouse-coordinates will be off as well. Don't use CSS to scale canvas if you're gonna use it interactively.
您需要以像素为单位设置画布的大小，否则不仅会降低其内容的质量，而且如果您想在其上绘图，鼠标坐标也会关闭。如果您要交互式使用它，请不要使用 CSS 来缩放画布。
I would recommend you adjust your imagethen adopt the canvas to whatever size the image is. You can do this by using getComputedStyle(element)which gives you whatever size the element is set to in pixels.
我建议您调整图像，然后将画布调整为任何图像大小。您可以通过使用getComputedStyle(element)which 为您提供元素设置的任何大小（以像素为单位）来执行此操作。
After image's onload(as you need to be sure the image is actually loaded to get its size) or later if you change the image (CSS) size on the go, you can do this:
在图像之后onload（因为您需要确保图像实际加载以获取其大小）或稍后如果您在旅途中更改图像 (CSS) 大小，您可以执行以下操作：
/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);
/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');
canvas.width = width;
canvas.height = height;
Now the canvas will fit image but with canvas pixel ratio 1:1 to help you avoid problems when you're gonna draw on the canvas. Otherwise you will need to convert/scale the mouse / touch coordinates as well.
现在画布将适合图像，但画布像素比为 1:1，以帮助您避免在画布上绘图时出现问题。否则，您还需要转换/缩放鼠标/触摸坐标。
回答by Irshad Khan
Resize Your canvas to fit Window/Browser Size :
调整画布大小以适合窗口/浏览器大小：
<script>
function resizeCanvas() {
var canvs = document.getElementById("snow");
canvs.width = window.innerWidth;
canvs.height = window.innerHeight;
}
</script>
<body onload="resizeCanvas();">
<canvas id="snow" ></canvas>
</body>
回答by C12
Set the canvas height to the window's innerHeight and the width to the window's innerWidth:
将画布高度设置为窗口的innerHeight，将宽度设置为窗口的innerWidth：
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
If you want a specific percentage, multiply them by the percentage. Example:
如果您想要一个特定的百分比，请将它们乘以百分比。例子：
//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
回答by Jochem Kuijpers
You could resize the canvas to fit the width of the image in pixels via JavaScript. Since you're using a canvas you are probably using JavaScript already so this should not be a problem.
您可以通过 JavaScript 调整画布的大小以适应图像的宽度（以像素为单位）。由于您使用的是画布，您可能已经在使用 JavaScript，因此这应该不是问题。
See Resize HTML5 canvas to fit window, although not identical, a similar solution should work.
请参阅Resize HTML5 canvas to fit window，虽然不完全相同，但应该使用类似的解决方案。
回答by Harrison Gibbs
Instead of using width="", use style="" as such
而不是使用 width=""，像这样使用 style=""
<canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas>
EDIT:
编辑：
<div class="needPic" id="container" style="width:70%; height:60%; min-width:__px; min-height:__px">
<img id="image" src="" style="width:70%; height:60%; min-width:__px; min-height:__px"/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas>
</div>
