如何解决在画布框内单击后更改其颜色
我目前正在使用预订系统。在画布内部单击后,我想更改画布的颜色。另外,再次单击等时,颜色应更改为旧颜色。
我的Reservation.php的代码:
<div class="row">
<div class="col-4">
<h3>Platz 1</h3>
<canvas id="court1" class="canvas" width="300" height="450" onclick="leftClickOnCanvasCourt()"></canvas>
</div>
<div class="col-4">
<h3>Platz 2</h3>
<canvas id="court2" class="canvas" width="300" height="450"></canvas>
</div>
<div class="col-4">
<h3>Platz 3</h3>
<canvas id="court3" class="canvas" width="300" height="450"></canvas>
</div>
</div>
我的js.js代码:
function leftClickOnCanvas(){
var ausgewaehlt = false;
var canvas = document.getElementById('court1');
var context = canvas.getContext('2d');
if(ausgewaehlt = false){
context.fillStyle = rgb(180,128,128);
context.fill();
ausgewaehlt = true;
} else if (ausgewaehlt = true){
context.fillStyle = rgb(240,128);
context.fill();
ausgewaehlt = false;
}
}
感谢您的帮助!
解决方法
首先,您应该熟悉console.,它将告诉您错误所在。
- 您需要在HTML中输入正确的函数名称。
- 您的RGB字符串需要加引号。
- 您需要使用比较运算符(
===
)而不是赋值运算符(=
)。 - 您需要使用
fillRect()
而不是fill()
。 - 您需要将
ausgewaehlt
移到该函数之外,否则每次运行该函数时,它将重置为false
。
var ausgewaehlt = false;
function leftClickOnCanvas() {
var canvas = document.getElementById('court1');
var context = canvas.getContext('2d');
if (ausgewaehlt === false) {
context.fillStyle = 'rgb(180,128,128)';
context.fillRect(0,canvas.width,canvas.height);
ausgewaehlt = true;
} else if (ausgewaehlt === true) {
context.fillStyle = 'rgb(240,canvas.height);
ausgewaehlt = false;
}
}
canvas {
border: 1px solid black;
}
<div class="row">
<div class="col-4">
<h3>Platz 1</h3>
<canvas id="court1" class="canvas" width="300" height="450" onclick="leftClickOnCanvas()"></canvas>
</div>
<div class="col-4">
<h3>Platz 2</h3>
<canvas id="court2" class="canvas" width="300" height="450"></canvas>
</div>
<div class="col-4">
<h3>Platz 3</h3>
<canvas id="court3" class="canvas" width="300" height="450"></canvas>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。