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

Question

I've put a canvas on top a background image. 我已经在背景图片上方放置了画布。 When I press the 'Try It' button the image appears in the canvas but it does not appear the same size as the parent or fit in the canvas. 当我按下“尝试”按钮时，图像出现在画布中，但它的大小与父对象的大小不同，或与画布的大小不同。 I only see the top left of the image. 我只看到图片的左上方。

The parent image and the canvas are the same size. 父图像和画布大小相同。

HTML 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 JS

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

How do I get it so that the image in the canvas is the same size as the parent? 如何获得它以便画布中的图像与父图像大小相同？ Also, how do I get the image to disappear from the canvas when I press 'Try It' on the second press? 另外，当我第二次按“ Try It”时，如何使图像从画布上消失？

Answer 1

I had the same issue and had to learn the hard way. 我遇到了同样的问题，不得不学习艰难的方法。 Responsive Canvas and same same aspect Ratio Canvas is not as easy as one would hope. 响应式画布和相同纵横比的“画布”并不像人们希望的那么容易。

What you need to do: 你需要做什么：

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

Let me explain why. 让我解释一下原因。

In your HTML, you have manually declared: 在HTML中，您已手动声明：

width="250" height="300"

So the image projected on the Canvas needs to be the same size. 因此，投影在画布上的图像必须具有相同的大小。 It is all controlled by the ctx.drawImage(img,10,10, 250, 300) function. 全部由ctx.drawImage（img，10,10，250，300）函数控制。

The first argument to the fn is the referenced data, this can be a video, image etc. fn的第一个参数是引用的数据，可以是视频，图像等。

The second arguments is the X axis offset, the third argument is the Y axys offset(If you want no offset, just pass : ctx.drawImage(img,0,0, 250, 300);. 第二个参数是X轴偏移量，第三个参数是Y轴偏移量（如果不希望偏移，则只需传递：ctx.drawImage（img，0,0，250，300）;。

In this case, the 4th and 5th arguments are the size of the what was passed as first argument. 在这种情况下，第4个和第5个参数是作为第一个参数传递的参数的大小。

Here is a codepen, try changing the arguments and see what happens. 这是一个Codepen，尝试更改参数，看看会发生什么。

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

PS, you can pass many many more arguments to this method, but usually, this is all you need. PS，您可以向该方法传递更多的参数，但是通常，这就是您所需要的。

Just wanted to add, you can increase a smaller image to fit a Canvas, and the other way around, but if you declare the size of the Canvas with HTML attributes, and use smaller numbers in the drawImage fn, it will not fill the canvas. 只是想添加，可以增加一个较小的图像以适合Canvas，反之亦然，但是，如果使用HTML属性声明Canvas的大小，并在drawImage fn中使用较小的数字，它将不会填充画布。 The HTML seems to have more specifity. HTML似乎更具特异性。 This can be good or bad, but it is important to know. 这可能是好是坏，但重要的是要知道。

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

问题描述

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