Css 为什么画布drawImage方法是缩放？_Css_Html_Canvas

Css 为什么画布drawImage方法是缩放？

css html canvas

Css 为什么画布drawImage方法是缩放？,css,html,canvas,Css,Html,Canvas,我试图用下面的代码在画布上绘制一幅宽150px、高150px的图片。但是，图片似乎是按照我在画布上设置的宽度和高度属性缩放的（我将宽度设置为500px，高度设置为300px）。为什么画布是这样工作的？如何在画布上绘制绝对大小为px的图像多谢各位 <head> <meta charset="UTF-8"> <title>Base</title> <script type="text/javascript" src=".

我试图用下面的代码在画布上绘制一幅宽150px、高150px的图片。但是，图片似乎是按照我在画布上设置的宽度和高度属性缩放的（我将宽度设置为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>


基础
var img=新图像（）；
$（窗口）.ready（函数（）{
img.src=“./Images/img.jpg”；；
ctx=document.getElementById（“main”）.getContext（“2d”）；
img.onload=函数（）{
ctx.drawImage（img，0,0,150,150）；
}
});

您需要设置画布的实际像素分辨率，即设置像素的行数和列数（通过使用

画布上的宽度
和高度
属性）。否则，您将得到一个画布，其默认分辨率由CSS确定的宽度和高度缩放
编辑：这样想吧。当您在DOM中放置画布时，实际上是在声明类似于可操纵图像的内容，该图像具有特定的宽度和高度（以像素为单位）。现在，图像可以任意缩放。因此，如果您有一个200x200画布，但在CSS中声明画布是400px x 200px，那么画布的每个像素将以两个像素的高度渲染（使用抗锯齿）。因此，画在画布上的任何图像都将是其正常高度的两倍。因此，如果希望画布上像素的宽度和高度表示屏幕上呈现的像素的宽度和高度**，则需要将宽度和高度设置为实际涉及的像素数，而不是使用CSS
**像素可能并不代表屏幕上的像素。例如，我以Surface Pro的形式写这篇文章，它的dpi缩放功能在许多应用程序中都处于活动状态，否则应用程序按钮会非常小，而且很难触摸激活。我的浏览器看到的屏幕宽度宽度为1920/1.5=1280。我可以为浏览器打开这个设置，重新启动它，它会看到完整的1920。。。现在，这对图像渲染有什么影响？我认为即使使用此设置，浏览器也可以以真正的像素分辨率完全渲染图像；Windows不仅仅是在浏览器中呈现一些模糊的放大版本，我还必须做一些研究，看看到底是什么Windows与浏览器结合使用。
足够清晰！非常感谢你！