如何将百分比宽度放入 html 画布（无 css）
Posted
技术标签:
【中文标题】如何将百分比宽度放入 html 画布（无 css）【英文标题】：How put percentage width into html canvas (no css) 【发布时间】：2013-09-11 19:56:59 【问题描述】：我有一张图片，并在其上覆盖了一个画布，这样我就可以“在”图片上进行绘制，而无需修改图片本身。
<div class="needPic" id="container">
<img id="image" src=""/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" >Sorry, your browser is not supported.</canvas>
</div>
我可以在上面的画布行中指定宽度和高度（以像素为单位），效果很好，但是我需要根据屏幕尺寸动态调整大小（必须在小型智能手机和平板电脑上工作）。当我尝试如上所示输入百分比时，它会将其解释为像素。因此，画布将是 70 像素宽和 60 像素高。
由于某种原因，我无法在 CSS 中调整画布的大小，所以看起来我必须在 html 中进行调整。澄清一下，当我尝试在 CSS 中指定画布尺寸时，它们实际上并没有改变画布的大小。似乎图像以某种方式受到干扰。
任何帮助将不胜感激。
更新：如果我这样做<canvas id="sketchpad" style="width:70%;height:60%;"></canvas>，那么它默认为 150 像素的高度和 300 像素的宽度（无论设备如何），然后 拉伸 画布以适应分区。我在 CSS 中将 div 设置为 60% 宽度和 60% 高度，因此画布会拉伸以填充它。我通过记录 canvas.width 与 canvas.style.width 确认了这一点——canvas.width 为 300px，canvas.sytle.width 为“60%”（来自父 div）。这会导致一些非常奇怪的像素化和绘图效果......
【问题讨论】：
也许您可以在 html 元素中添加 CSS，例如：<canvas style="width:70%;height:60%;">。
@FabSa，我刚刚尝试过，它做了一些事情，但没有像预期的那样。请参阅上面的更新。
如您所见，当您设置样式时，浏览器只会拉伸/收缩画布，但不会更改画布的每英寸点数。您需要从脚本中设置尺寸（连同样式）。您可以查看一个 Impactjs 文档：impactjs.com/documentation/impact-on-mobile-platforms（请参阅“始终以本机分辨率渲染”部分，它可能会帮助您更好地理解问题）。
【参考方案1】：
将画布高度设置为窗口的innerHeight，宽度设置为窗口的innerWidth：
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
如果您想要一个特定的百分比，请将它们乘以百分比。 示例：
//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
【讨论】：
【参考方案2】：调整画布大小以适应窗口/浏览器大小：
<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>
【讨论】：
【参考方案3】：您需要以像素为单位设置画布的大小，否则您不仅会降低其内容的质量，而且如果您想在其上绘图，鼠标坐标也会关闭。如果您要以交互方式使用它，请不要使用 CSS 来缩放画布。
我建议您调整您的 图像，然后将画布调整为图像的大小。您可以使用getComputedStyle(element) 来做到这一点，它会为您提供元素设置为像素的任何大小。
在图像的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;
现在画布将适合图像，但画布像素比为 1:1，以帮助您避免在画布上绘图时出现问题。否则，您还需要转换/缩放鼠标/触摸坐标。
【讨论】：
仅供参考，如果使用 jQuery，则不能使用width() 和 height()，因为这只会设置 CSS 样式。您需要使用.attr('width', 10) 和.attr('height', 10)。
以前没有听说过 getComputedStyle。它就像一个魅力，非常感谢你。如果我不止一次反对投票就好了。
谢谢！这篇文章对我来说非常有效:)【参考方案4】：
您可以通过 javascript 调整画布的大小以适应图像的宽度（以像素为单位）。由于您使用的是画布，因此您可能已经在使用 JavaScript，所以这应该不是问题。
请参阅Resize HTML5 canvas to fit window，虽然不完全相同，但应该可以使用类似的解决方案。
【讨论】：
【参考方案5】：不要使用，而是使用style=""
<canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas>
编辑：
<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>
【讨论】：
我刚刚尝试过，它做了某事，但不如预期。请参阅上面的更新。 @Xenocideae 尝试将 div 的最小宽度设置为更低：style="min-width:75px; min-height:75px" 或任何您希望的最小值 感谢您的帮助 - 我在 css 中将 div 和 canvas 的 min-width 和 min-height 设置为 60%，然后在我的 html 中将 canvas 设置为style="width:70%; height:60%"。它实际上解决了另一个问题，但画布仍然显示它是 150x300 像素并且可以拉伸以适应更大的图像。
@Xenocideae 如果你用相同的 min 和 % 设置 img 会怎样？
我使用了您的代码并将所有最小宽度/高度设置为 400 像素。我屏幕上的其他元素相应移动，但画布仍然显示它是 150x300 像素，并且可以拉伸以适应更大的图像。以上是关于如何将百分比宽度放入 html 画布（无 css）的主要内容，如果未能解决你的问题，请参考以下文章
JS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布
HTML宽度属性和CSS宽度属性（画布）之间的区别？ [复制]