更改HTML5画布中的背景图像 [英] Change background image in HTML5 canvas
本文介绍了更改HTML5画布中的背景图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要在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
- 单击
相应按钮会在
< canvas>
元素上设置唯一的CSS类。 - 使用CSS将背景图像应用于画布。
- On
click
of the appropriate buttons set a unique CSS class on your<canvas>
element. - 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.
- 编写一个
redraw()
函数,该函数知道如何擦除画布并重新生成图形,包括先确定要绘制的图像作为背景。 - 单击
按钮会设置一个变量,然后重新调用
redraw()
函数。它将擦除您的画布,并使用该变量绘制正确的图像。
- 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. - On
click
of the buttons set a variable and re-invoke yourredraw()
function. It will erase your canvas and use the variable to draw the correct image.
这篇关于更改HTML5画布中的背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文