Question

我有一个图像，并在其上方覆盖了一个画布，这样我就可以在不修改图像本身的情况下在图像上绘制。

<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>，则默认为150px的高度和300px的宽度（无论设备如何），然后将画布延伸到适合div。我在css中将div设置为60％宽度和60％高度，因此画布延伸以填充它。我通过记录canvas.width vs canvas.style.width确认了这一点 - canvas.width为300px，canvas.sytle.width为'60％'（来自父div）。这会导致一些非常奇怪的像素化和绘画效果......

Answer 1

您需要以像素为单位设置画布的大小，否则您不仅会降低其内容的质量，而且如果您想在其上绘制，鼠标坐标也会关闭。如果您要以交互方式使用它，请不要使用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可以帮助您避免在画布上绘制时出现问题。否则，您还需要转换/缩放鼠标/触摸坐标。

Answer 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>

Answer 3

您可以通过JavaScript调整画布大小以适合图像的宽度（以像素为单位）。由于您使用的是画布，因此您可能已经使用了JavaScript，所以这应该不是问题。

请参阅Resize HTML5 canvas to fit window，虽然不相同，但类似的解决方案应该有效。

Answer 4

将画布高度设置为窗口的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

Answer 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"/>  <canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas> </div>

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

5 个答案: