单击以使用图像填充画布背景？

【问题标题】：Click to populate Canvas Background with an Image?单击以使用图像填充画布背景？
【发布时间】：2012-04-06 09:50:37
【问题描述】：

我想创建一个按钮，当单击静态图像时，它会显示为 html 画布元素背景？

我该怎么做？

不确定样式表切换器是否是正确的方向？也许有更聪明的解决方案？

【问题讨论】：

【解决方案1】：

试试这个

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
       $('#btnSet').click(function(){
           $('#canvas').css("background","url('plant1.jpg')");
        });
    });
</script>
</head>
<body>
<canvas id="canvas" width="500" height="200">

</canvas>
<br/>
<button id="btnSet">Set Canvas BG</button>
</body>
</html>

【讨论】：

【解决方案2】：

如果你只想显示一张图片，你不妨使用 img 标签：

<script>
    function() setImage() {
        document.geTElementById("myImage").src = "myImage.jpg";
    }
</script>
<input type="button" value="Set Image" onclick="setImage()"/>
<img id="myImage"/>

确保 myImage.jpg 确实指向您的图片。

【讨论】：