JS drawImage壞了

Question

該圖像位於同一目錄中，所有內容，我似乎無法使其正常工作。

<body>
<center>
<canvas id='scrn' width='100' height='100'/>
</center>
<script>
function draw() {
var cv = document.getElementById('scrn').getContext('2d');
var img = document.getElementById('image');
cv.drawImage(img,10,10 10, 10,);
}
draw();
</script>
<image id='image' src='test.jpg'/>
</body>

該圖像顯示在<image>標記中，但不在 canvas 中。 這是為什么？

Answer 1

您需要使用回調，以便僅在圖像加載后調用 boot()。 例如：

document.getElementById("image").onload = boot

Answer 2

var canvas = document.getElementById('scrn'); // get your canvas
    if (canvas) {
      var context = canvas.getContext('2d'); // get canvas context
      var img = document.getElementById('image'); // get image
      if (context && img) { // make sure context and img exists
        img.onload = () => { // call drawImage when img has finished loading
          context.drawImage(img,10,10 10, 10,);
        }
      }
    }

我建議在 var 上使用 let 和 const。 為了以后的注意，請始終在圖像的 onload 回調中使用 drawImage，因為這樣可以確保您希望繪制的圖像已成功加載。

JS drawImage壞了

問題描述

2 個解決方案

解決方案1
0 2021-04-10 00:59:19

解決方案2
0 2021-04-15 13:37:43

JS drawImage壞了

問題描述

2 個解決方案

解決方案1 0 2021-04-10 00:59:19

解決方案2 0 2021-04-15 13:37:43

解決方案1
0 2021-04-10 00:59:19

解決方案2
0 2021-04-15 13:37:43