更改HTML5画布中的背景图像 [英] Change background image in HTML5 canvas

问题描述

我需要在HTML5画布中更改背景图像。

I need to change background image in HTML5 canvas.

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

I want to use 2 different thumbnails as buttons and when I click on one of the images the background should be change to that particular image.

推荐答案

技术1

Technique 1

1. 单击 相应按钮会在< canvas> 元素上设置唯一的CSS类。


2. 使用CSS将背景图像应用于画布。

1. On click of the appropriate buttons set a unique CSS class on your <canvas> element.
2. Use CSS to apply a background image to your canvas.

绘制命令并删除您的画布不会影响内容后面的CSS应用背景图像。

Drawing commands and erasing your canvas will not affect the CSS-applied background image behind your content.

1. 编写一个 redraw（）函数，该函数知道如何擦除画布并重新生成图形，包括先确定要绘制的图像作为背景。


2. 单击 按钮会设置一个变量，然后重新调用 redraw（）函数。它将擦除您的画布，并使用该变量绘制正确的图像。



1. Write a redraw() function that knows how to erase the canvas and regenerate your drawing, including determining what image to draw as the background first.
2. On click of the buttons set a variable and re-invoke your redraw() function. It will erase your canvas and use the variable to draw the correct image.

这篇关于更改HTML5画布中的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！