<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)确认。这会导致一些非常奇怪的像素化和绘图效果…
解决方法
我建议你调整你的图像,然后采取画布到图像的任何大小。您可以通过使用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,以帮助您避免在画布上绘制时出现问题。否则,您将需要转换/缩放鼠标/触摸坐标。
原文地址:https://www.jb51.cc/html/233467.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。