Question

我正在尝试使用以下代码在宽度为150像素，高度为150像素的画布上绘制图片。但是，图片似乎是根据我设置到画布的宽度和高度属性进行缩放（我将宽度设置为500px，高度设置为300px）。为什么画布这样工作？如何在画布上绘制绝对大小为px的图像？

非常感谢！

<head>
    <meta charset="UTF-8">
    <title>Base</title>
    <script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        var img = new Image();

        $(window).ready(function() {
            img.src = "./Images/img.jpg";;

            ctx = document.getElementById("main").getContext("2d");

            img.onload = function() {
                ctx.drawImage(img, 0, 0, 150, 150);
            }
        });

    </script>
</head>

<body>
    <canvas id="main" style="background-color:yellow; width:500px; height:300px; z-index:1; position:absolute;"></canvas>
</body>

Answer 1

您需要设置画布的实际像素分辨率，即设置像素的行数和列数（使用width上的height和canvas属性标签）。否则，您将获得一个画布，其默认分辨率按您的CSS确定的宽度和高度缩放。

编辑：以这种方式思考。当您在DOM中放置画布时，您基本上会声明类似于具有特定宽度和高度（以像素为单位）的可操作图像。现在该图像可以任意缩放。因此，如果您有200x200画布，但在CSS中声明画布是400px乘200px，则画布的每个像素将以两个像素的高度渲染（具有抗锯齿）。因此，绘制到该画布的任何图像都将是通常的两倍高。因此，如果您希望画布上像素的宽度和高度表示屏幕上呈现的像素的值，则需要将宽度和高度设置为所涉及的实际像素数，而不是使用CSS。

**像素可能无法真正代表屏幕上的像素。例如，我正在将它写为Surface Pro，它为许多应用程序提供了dpi扩展活动，否则应用程序按钮将非常小并且触摸它有点难以激活。浏览器看到宽度的屏幕宽度是1920 / 1.5 = 1280.我可以为浏览器设置此设置，重新启动它，它会看到完整的1920 ...现在，这是如何影响图像渲染？我认为即使使用此设置，浏览器也可以渲染完整的真实像素分辨率图像; Windows不只是渲染一些模糊缩放的浏览器版本，但我必须做一些研究才能看到实际上Windows与浏览器的结合。

为什么canvas drawImage方法正在缩放？

1 个答案: