如何解决获取 Canvas 中图像的更新高度
所以我在画布上绘制了一个大图像。
context.drawImage(img,img.width,img.height,canvas.width / 2,canvas.height / 2);
我正在尝试使用图像的高度和宽度使其在画布内居中,但是当我这样做时,它不起作用,因为 img.naturalHeight、clientHeight 和 height 都给了我原始图片的高度超过5000 像素。但我需要图像在画布上绘制后的高度,否则当我从左侧或顶部定位 5000 像素时,它会超出画布的视口。
如果有人有任何见解可以分享,我将不胜感激。谢谢各位!
解决方法
要计算将图像绘制到画布中的目标位置,使图像居中而不调整大小,您可以使用以下内容:
let x = (canvas.width - img.width) / 2;
let y = (canvas.height - img.height) / 2;
context.drawImage(img,x,y);
如果您想绘制调整大小和居中的图像,您可以使用以下内容:
let width = 100;
let height = 100;
let x = (canvas.width - width) / 2;
let y = (canvas.height - height) / 2;
context.drawImage(img,y,width,height);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。