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);
}

我使用CANVAS设置CSS的样式，将其显示在浏览器的中心。这是什么我在这里做错了。请帮忙。感谢。

Answer 1

不要使用CSS来调整画布大小，因为它会扭曲画布内容 - 拉伸它。

而是调整画布元素本身的大小：

<canvas width=100 height=100> or 

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

祝你的项目好运！

在画布上绘制时图像尺寸会放大

1 个答案: