html - 如何将百分比宽度放入 html Canvas (无 css)

Question

我有一张图片，并在其上面覆盖了一个 Canvas ，这样我就可以在不修改图片本身的情况下“在”图片上绘图。

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

我可以在上面的 Canvas 行中以像素为单位指定宽度和高度，效果很好，但是我需要根据屏幕尺寸动态调整大小(必须在小型智能手机和平板电脑上工作)。当我尝试如上所示输入百分比时，它会将其解释为像素。因此， Canvas 将为 70 像素宽和 60 像素高。

出于某种原因，我无法在 CSS 中调整 Canvas 的大小，所以看起来我必须在 html 中进行调整。澄清一下，当我尝试在 CSS 中指定 Canvas 尺寸时，它们实际上并没有改变 Canvas 的大小。图像似乎以某种方式受到干扰。

如有任何帮助，我们将不胜感激。

更新:如果我这样做 <canvas id="sketchpad" style="width:70%;height:60%;"></canvas>然后它默认为 150 像素的高度和 300 像素的宽度(无论设备如何)然后拉伸(stretch) Canvas 以适合 div。我在 css 中将 div 设置为 60% 宽度和 60% 高度，因此 Canvas 会拉伸(stretch)以填充它。我通过记录 canvas.width 与 canvas.style.width 来确认这一点——canvas.width 是 300px 而 canvas.sytle.width 是“60%”(来自父 div)。这会导致一些非常奇怪的像素化和绘图效果......

Answer 1

您需要以像素为单位设置 Canvas 的大小，否则不仅会降低其内容的质量，而且如果您想在其上绘图，鼠标坐标也会关闭。如果您要以交互方式使用它，请不要使用 CSS 来缩放 Canvas 。

我建议您调整您的图像，然后将 Canvas 应用到图像的任何大小。您可以使用 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;

现在 Canvas 将适合图像，但 Canvas 像素比率为 1:1，以帮助您避免在 Canvas 上绘图时出现问题。否则，您还需要转换/缩放鼠标/触摸坐标。