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

Question

我已经在背景图片上方放置了画布。 当我按下“尝试”按钮时，图像出现在画布中，但它的大小与父对象的大小不同，或与画布的大小不同。 我只看到图片的左上方。

父图像和画布大小相同。

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>

JS

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

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

Answer 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"

因此，投影在画布上的图像必须具有相同的大小。 全部由ctx.drawImage（img，10,10，250，300）函数控制。

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

第二个参数是X轴偏移量，第三个参数是Y轴偏移量（如果不希望偏移，则只需传递：ctx.drawImage（img，0,0，250，300）;。

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

这是一个Codepen，尝试更改参数，看看会发生什么。

https://codepen.io/pen/?editors=1010

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

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-07 11:58:55

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-07 11:58:55

解决方案1
1 已采纳 2019-02-07 11:58:55