[英]How to change the canvas background image when a input type button is clicked using jquery?
我在画布上画画板。 我正在尝试使用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)");
}
尽量只使用一个ID
function Whitecanvas() {
$("#whitecanvas").css("background-image", "url(images/whitetexturepaper.jpg)");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.