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

Click to populate Canvas Background with an Image?

本文关键字：布背景 背景 填充 图像 单击      更新时间：2023-09-26

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

我该怎么做？

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

试试这个

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

如果你只想显示一个图像，你还可以使用img标签：

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

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

相关文章：