在画布上绘制时的图像大小放大 [英] Image size enlarging when drawing it on the Canvas

问题描述

我有一张46 * 46像的图片。虽然我使用下面的代码来绘制它的画布，图像被放大。

I have a 46*46 png image . While I use the following code to draw it on the Canvas,the image is getting enlarged.

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 将其显示在浏览器的中心。
我在这里做错了什么。请帮忙。感谢。

I have styled the CANVAS using a CSS for appearing it on the center of the browser. What is it I'm doing wrong here. Please help. Thanks.

推荐答案

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

Don't use CSS to resize the canvas because it will distort the canvas content--stretching it.

改变canvas元素本身的大小：

Instead resize the canvas element itself:

<canvas width=100 height=100> or 

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

祝您项目顺利！

这篇关于在画布上绘制时的图像大小放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！