Question

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

我该怎么做呢？

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

Answer 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>

Answer 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实际指向您的图像。

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

2 个答案: