Question

我可以按照本教程预先加载一些图像并在画布中绘制它们：

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

我希望默认情况下在画布中显示基本图像，然后仅在用户单击特定列表项时才绘制其他图像。这是我的代码：

document.querySelector("highlight_1").addEventListener("click", function() {
  ctx.drawImage(images.arrow45, 177, 464, 32, 32);
});

我不能让这一点工作，我真的很感激一些建议。谢谢！

更新问题

感谢Monica Olejniczak，我已经对此有所了解，但又被卡住了。

在sources数组中，我想通过使用getElementById（）并使用id为“canvasBase”的网页上的图像的源URL来提取“base”的值

这是我更新的小提琴：

https://jsfiddle.net/xz1x8jkr/21/

可以这样做吗？

Answer 1

您的点击处理程序未触发，因为您的选择器引用了不存在的标记<highlight_1>。这应该是.highlight_1来指定<li class="highlight_1">的类。

此代码片段未按预期工作的另一个原因是您尝试引用变量images。但是，此变量仅在回调中声明以加载源图像，如下所示。

loadImages(sources, function(images) {
    // Reference to images is available in this function, and any nested functions.
    ctx.drawImage(images.base, 0, 0, 685, 525);
});

// Images reference no longer available here

document.querySelector("highlight_1").addEventListener("click", function() {
    // Images reference is also no longer available here 
    ctx.drawImage(images.arrow45, 177, 464, 32, 32);
});

相反，您应该具有以下内容：

loadImages(sources, function(images) {
    ctx.drawImage(images.base, 0, 0, 685, 525);
    document.querySelector(".highlight_1").addEventListener("click", function() {
       ctx.drawImage(images.arrow45, 177, 464, 32, 32);
    });
});

这样您就可以访问images，因为它引用了loadImages回调中指定的声明。

选择元素时显示预加载的画布图像

1 个答案: