我有一个 46*46 的 png 图片。当我使用以下代码在 Canvas 上绘制它时,图像变大了。
window.onload = function()
{
drawEx1();
}
var image1 = null;
function drawEx1()
{
image1 = new Image();
image1.src =
"unnamed.png";
image1.addEventListener('load', drawImage1);
}
function drawImage1()
{
if (image1.height > 46)
{
image1.height = 46;
}
context.drawImage(image1, 10, 10,image1.height,image1.height);
}
我使用 CSS
为 CANVAS
设置了样式,使其显示在浏览器的中央。
我在这里做错了什么。请帮忙。谢谢。
最佳答案
不要使用 CSS 来调整 Canvas 的大小,因为它会扭曲 Canvas 内容——拉伸(stretch)它。
改为调整 Canvas 元素本身的大小:
<canvas width=100 height=100> or
document.getElementById('mycanvas').width=100;
祝你的元素好运!
关于javascript - 在 Canvas 上绘制时图像尺寸放大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27611111/