更改 HTML5 画布中的背景图像

Question

我需要更改 HTML5 画布中的背景图片。

我想使用 2 个不同的缩略图作为按钮，当我单击其中一个图像时，背景应该会更改为该特定图像。

Answer 1

技术 1

1. 在click 的相应按钮上为您的<canvas> 元素设置一个唯一的CSS 类。
2. 使用 CSS 将背景图片应用到画布。

绘制命令和擦除画布不会影响内容背后的 CSS 应用背景图像。

技巧2

1. 编写一个redraw() 函数，该函数知道如何擦除画布并重新生成绘图，包括确定首先要绘制什么图像作为背景。
2. 在按钮的click 上设置一个变量并重新调用您的redraw() 函数。它将擦除您的画布并使用该变量绘制正确的图像。