画布图像与画布或原始图像大小不同答案

【问题标题】：Canvas image is not the same size as the canvas or orginal image画布图像与画布或原始图像大小不同
【发布时间】：2022-03-31 01:27:28
【问题描述】：

我在背景图片上放置了一个画布。当我按下“试一试”按钮时，图像出现在画布中，但它的大小与父级不同或不适合画布。我只看到图片的左上角。

父图像和画布大小相同。

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <div class="bg">
            <img src="Assets/Images/background.png" alt="background">   
        </div>
        <section class="content">

            <p>Image to use:</p>
            <img id="taxi" src="Assets/Images/PV.png" width="250" height="300">

            <p>Canvas to fill:</p>
            <canvas id="myCanvas" width="250" height="300"
            style="border:1px solid #d3d3d3;">
            Your browser does not support the HTML5 canvas tag.</canvas>

            <p><button onclick="myCanvas()">Try it</button></p>
        </section>

    </body>
</html>

function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("taxi");
    ctx.drawImage(img,10,10);
  }

我如何获得它以使画布中的图像与父图像大小相同？另外，当我在第二次按下“Try It”时，如何让图像从画布上消失？

【问题讨论】：

在myCanvas 尝试ctx.drawImage(img,0,0);。如果你这样做ctx.drawImage(img,10,10)，这将使你的图像在 x 方向偏移 10 px，在 y 方向偏移 10 px
您希望画布具有相同的比例等，对吧？

标签： javascript html canvas

【解决方案1】：

我也遇到了同样的问题，不得不努力学习。响应式画布和相同纵横比的画布并不像人们希望的那样简单。

你需要做什么：

function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,10,10, 250, 300);
}

让我解释一下原因。

在您的 HTML 中，您已手动声明：

width="250" height="300"

所以投影在Canvas 上的图像需要相同大小。全部由ctx.drawImage(img,10,10, 250, 300)函数控制。

函数的第一个参数是引用的数据，可以是视频、图像等。

第二个参数是X 轴偏移量，第三个参数是Y 轴偏移量。如果您不想要偏移量，只需通过：

ctx.drawImage(img,0,0, 250, 300);

在这种情况下，第 4 和第 5 个参数是作为第一个参数传递的内容的大小。

Here is a codepen，尝试更改参数，看看会发生什么。

PS，您可以向此方法传递更多参数，但通常，这就是您所需要的。

只是想补充一下，你可以增加一个较小的图像以适应 Canvas，反之亦然，但是如果你用 HTML 属性声明 Canvas 的大小，并在 drawImage 函数中使用较小的数字，它不会填满画布。 HTML 似乎更具特异性。这可能是好是坏，但知道这一点很重要。

【讨论】：

这很完美，感谢您的帮助和解释。我在上面找不到任何东西！
没问题，伙计。等到你尝试响应式画布:-)我最好的来源，在所有有 w3schools 的地方:-)
我认为这是我接下来需要查看的内容，我希望画布与浏览器大小成比例。谢谢推荐。
我可以用最简单的步骤来解释。 1，不要在HTML中声明宽度或高度，根本不要在HTML中声明任何宽度2在CSS文件中声明宽度3需要一点JS来获得正确的高度，比如var aspectRatio = 1.3; canvas.height = canvas.width * aspectRatio;检查这支笔，这工作codepen.io/damPop/pen/GwqxvM?editors=0110