如何使用 jquery 单击输入类型按钮时更改画布背景图像

How to change the canvas background image when a input type button is clicked using jquery?

本文关键字：布背景 背景 图像 单击 jquery 何使用 输入 类型 按钮      更新时间：2023-09-26

我正在画布上制作绘图板。当使用 jquery 单击输入图像时，我正在尝试更改画布的背景。

这是我的画布和按钮的 html 代码

帆布：

<canvas id="myCanvas" width="640" height="480"></canvas>

点击时的输入类型图像：

<section id="canvascolor">
<input id="whitecanvas" class="canvasborder" type="image" src="images/whitecanvas.jpg"   onClick="Whitecanvas()">
<input id="blackcanvas" class="canvasborder" type="image" src="images/blackcanvas.jpg" onClick="Blackcanvas()">
<input id="yellowcanvas" class="canvasborder" type="image" src="images/yellowcanvas.jpg" onClick="Yellowcanvas()">
<input id="bluecanvas"  class="canvasborder" type="image" src="images/bluecanvas.jpg" onClick="Bluecanvas()">
<input id="redcanvas" class="canvasborder" type="image" src="images/redcanvas.jpg" onClick="Redcanvas()">
<input id="greencanvas" class="canvasborder" type="image" src="images/greencanvas.jpg" onClick="Greencanvas()">
</section>

.CSS：

canvas{
background-image:url(../images/whitetexturepaper.jpg);
background-repeat:no-repeat;
background-size:cover;

}

我已经尝试了以下jquery，但它不起作用！

function Whitecanvas(){
    $("#myCanvas").css("background-image","url(images/whitetexturepaper.jpg)");
  }

将代码放在元素定义的末尾。

小提琴演示

问题，您在元素在 DOM 中之前定义函数。

更好地使用 jQuery 版本

从部分中的输入标记中删除点击事件

小提琴演示

$(document).ready(function () {
    $("#canvascolor > input").click(function () {
        var img = $(this).attr('src');
        $('#myCanvas').css("background-image", "url(" + img + ")");
    });
});

尝试只使用一个 ID

function Whitecanvas() {
    $("#whitecanvas").css("background-image", "url(images/whitetexturepaper.jpg)");
}
相关文章：