畫布圖像的大小與畫布或原始圖像的大小不同

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