如何把百分比宽度到html canvas（no css） [英] How put percentage width into html canvas (no css)

问题描述

我有一个图像，并且在它的顶部覆盖了一个画布，这样我可以在图像上绘制而不修改图像本身。

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>

我可以在上面的画布线中指定像素的宽度和高度，需要这个动态大小基于屏幕尺寸（必须工作在小型智能手机以及平板电脑）。当我尝试把百分比如上所示，它解释为像素。因此，画布宽度为70像素，高度为60像素。

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.

由于某种原因，我无法在CSS中设置画布大小，所以看起来像我要做的html。要澄清，当我尝试在CSS中指定画布尺寸时，它们实际上不会改变画布的大小。

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.

任何帮助都会感激。

Update：如果我执行< canvas id =sketchpadstyle =width：70％; height：60％;>< / canvas> 然后默认为150px的宽度和300px的宽度（不管设备），然后拉伸画布适合div。我将div设置为css中的60％宽度和60％高度，因此画布延伸以填充。我通过记录canvas.width vs canvas.style.width - canvas.width为300px，canvas.sytle.width为'60％'（来自父div）确认了这一点。这会导致一些真正奇怪的像素化和绘制效果...

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 stretches the 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...

推荐答案

你需要设置画布的大小，将不仅会降低其内容的质量，但如果你想画它的鼠标坐标也将关闭。

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.

我建议您调整图片，然后采用画布到任何大小的图像是。你可以使用 getComputedStyle（element）来做到这一点，它给出了以像素为单位的元素的任何大小。

I would recommend you adjust your image then 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.

After image onload （因为您需要确保图片实际上已加载以获得其大小）或更高版本，如果您随时随地更改图片（CSS）可以这样做：

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:

/// 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， 在画布上画画。否则，您将需要转换/缩放鼠标/触摸坐标。

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.

这篇关于如何把百分比宽度到html canvas（no css）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！