为什么我的图像不会绘制到 canvas 除非 html 中有图像实例？

Question

I have a canvas element, context 2d, and a list of image sources I want to be able to switch between.我有一个 canvas 元素、上下文 2d 和一个我希望能够在它们之间切换的图像源列表。 Currently, the only image that draws is the image that is already loaded in the html, with the other images simply not drawing to canvas, BUT when I console.log the image will show the image object, but it still doesn't draw.目前，唯一绘制的图像是已经加载到 html 中的图像，其他图像根本没有绘制到 canvas，但是当我 console.log 时，图像将显示图像 ZA8CFDE6331BD59EB2AC966F8911C4，但它仍然没有绘制。 I also drew a test rectangle previously to make sure the canvas is working, and the rectangle drew fine.我之前还画了一个测试矩形，以确保 canvas 工作正常，并且矩形画得很好。 Here is my code.这是我的代码。

Html: Html：

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Card Test</title>
</head>

<body>
    <canvas class="canvas" height="700" width="700" style="background-color: #3e3e3e"></canvas>

</body>

<img width="100" height="200" src="/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.png">



<script type="text/javascript" src="draw.js"></script>

</html>

Javascript (draw.js): Javascript（draw.js）：

const canvas = document.querySelector(".canvas");

var imageObj = new Image();

const ctx = canvas.getContext("2d");

const images = [
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/2C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/4C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/5C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/6C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/7C.png'
];

window.onload = function() {

    console.log('test1');
    imageObj.width = 100;
    imageObj.height = 200;
    imageObj.src = images[4]; // EX. Only images[1] will load because I have it loaded in the html

    console.log(imageObj);

    ctx.drawImage(imageObj, 50, 50);

    console.log('test2');
}

Answer 1

Wait for the image to load with an event listener before you try to draw it on the canvas.在您尝试在 canvas 上绘制图像之前，请等待使用事件侦听器加载图像。

 const images = [ 'https://picsum.photos/100/200?random=1', 'https://picsum.photos/100/200?random=2', 'https://picsum.photos/100/200?random=3', 'https://picsum.photos/100/200?random=4', 'https://picsum.photos/100/200?random=5', ]; var imageObj = new Image(); imageObj.width = 100; imageObj.height = 200; imageObj.src = images[4]; imageObj.addEventListener("load", () => { const canvas = document.querySelector(".canvas"); const ctx = canvas.getContext("2d"); ctx.drawImage(imageObj, 50, 50); });

 canvas { background-color: #3e3e3e; }

 <canvas class="canvas" height="700" width="700"></canvas>

为什么我的图像不会绘制到 canvas 除非 html 中有图像实例？

问题描述

1 个解决方案

解决方案1
1 2020-12-29 18:58:53

为什么我的图像不会绘制到 canvas 除非 html 中有图像实例？

问题描述

1 个解决方案

解决方案1 1 2020-12-29 18:58:53

解决方案1
1 2020-12-29 18:58:53