如何将百分比宽度放入 html 画布（无 css）答案

【问题标题】：How put percentage width into html canvas (no css)如何将百分比宽度放入 html 画布（无 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" width="70%" height="60%">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（请参阅“始终以本机分辨率渲染”部分，它可能会帮助您更好地理解问题）。

标签： html canvas

【解决方案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】：

不要使用width=""，而是使用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 像素，并且可以拉伸以适应更大的图像。