如何将百分比宽度放入html画布(无CSS)
|
我有一个图像，并在它的顶部覆盖了一个画布，以便我可以绘制“图像”而不修改图像本身。
<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。我将div设置为css中的宽度为60％，高度为60％，因此画布可以填充。我通过记录canvas.width和canvas.style.width – canvas.width为300px，canvas.sytle.width为’60％'(从父div)确认。这会导致一些非常奇怪的像素化和绘图效果… 解决方法
您需要设置画布的大小(以像素为单位)，否则您不仅会降低其内容的质量，而且如果要绘制画面，鼠标坐标也将被关闭。如果要交互使用CSS，请不要使用CSS来缩放画布。
我建议你调整你的图像，然后采取画布到图像的任何大小。您可以通过使用getComputedStyle(element)来实现此功能，它可以给出元素设置为像素的任何大小。 图像上传后(因为您需要确保图像实际加载以获取其大小)或更高版本，如果您随时随地更改图像(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，以帮助您避免在画布上绘制时出现问题。否则，您将需要转换/缩放鼠标/触摸坐标。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |