我正在用 Canvas 制作画板。当使用 jquery 单击输入图像时,我试图更改 Canvas 的背景。
这是我的 Canvas 和按钮的 html 代码
Canvas :
<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 版本
remove onclick events from input tags in section
$(document).ready(function () {
$("#canvascolor > input").click(function () {
var img = $(this).attr('src');
$('#myCanvas').css("background-image", "url(" + img + ")");
});
});
关于javascript - 使用 jquery 单击输入类型按钮时如何更改 Canvas 背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19877961/