为什么画布的drawImage方法是缩放的？答案

【问题标题】：why canvas drawImage method is scaling?为什么画布的drawImage方法是缩放的？
【发布时间】：2013-11-22 03:47:25
【问题描述】：

我正在尝试使用以下代码在宽度为 150 像素、高度为 150 像素的画布上绘制图片。但是，图片似乎随着我为画布设置的宽度和高度属性缩放（我将宽度设置为 500 像素，高度设置为 300 像素）。为什么画布会这样工作？如何在画布上以 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>

【问题讨论】：

标签： css html canvas

【解决方案1】：

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

编辑：这样想。当你在 DOM 中放置一个画布时，你实际上是在声明一个具有特定宽度和高度（以像素为单位）的可操作图像之类的东西。现在该图像可以任意缩放。因此，如果您有一个 200x200 的画布，但在 CSS 中声明该画布为 400 x 200 像素，则画布的每个像素都将以两个像素的高度进行渲染（使用抗锯齿）。因此，绘制到该画布上的任何图像都将是正常高度的两倍。因此，如果您希望画布上像素的宽度和高度代表屏幕上呈现的像素的宽度**，您希望将宽度和高度设置为实际涉及的像素数，而不是使用 CSS。

** 像素可能并不代表屏幕上的像素。例如，我在 Surface Pro 上写这篇文章，它对许多应用程序都具有 dpi 缩放功能，否则应用程序按钮会非常小，并且很难触摸激活。我的浏览器看到的屏幕宽度是 1920/1.5 = 1280。我可以为浏览器打开这个设置，重新启动它，它会看到完整的 1920 ......现在，这对图像渲染有什么影响?我认为即使使用此设置，浏览器也可以呈现完整的真实像素分辨率图像； Windows 不仅会渲染一些模糊放大的浏览器版本，而且我必须做一些研究才能真正了解 Windows 与浏览器的结合。

【讨论】：

够清楚了！非常感谢！