javascript - 在 Canvas 上绘制时图像尺寸放大

Question

我有一个 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 设置了样式，使其显示在浏览器的中央。我在这里做错了什么。请帮忙。谢谢。

Answer 1

不要使用 CSS 来调整 Canvas 的大小，因为它会扭曲 Canvas 内容——拉伸(stretch)它。

改为调整 Canvas 元素本身的大小:

<canvas width=100 height=100> or 

document.getElementById('mycanvas').width=100;

祝你的元素好运!