Блог

Главная - Вопросы по программированию - Изменение цвета поля холста после нажатия внутри него

Изменение цвета поля холста после нажатия внутри него

#javascript #php #canvas

#javascript #php #холст

Вопрос:

В настоящее время я работаю над системой бронирования. Я хочу изменить цвет холста после щелчка внутри холста. Кроме того, цвет должен быть изменен на старый цвет при повторном нажатии и т.д.

код моего 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, 128);
    context.fill();
    ausgewaehlt = false;
}

}

Я ценю вашу помощь!

Ответ №1:

Сначала вы должны ознакомиться с вашей консолью. Он сообщит вам, в чем заключаются ваши ошибки.

  • У вас должно быть правильное название функции в 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, 0, canvas.width, canvas.height);
    ausgewaehlt = true;
  } else if (ausgewaehlt === true) {
    context.fillStyle = 'rgb(240, 128, 128)';
    context.fillRect(0, 0, canvas.width, 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>

Комментарии:

1. Есть ли способ, как я могу получить значение ausgewaehlt, когда я хочу зарезервировать выбранные теннисные корты?

2. да, вы можете использовать эту переменную везде, где захотите, она находится в глобальной области видимости.

3. Я имею в виду, если я хочу получить все суды, у которых есть ausgewaehlt === true, как мне это сделать?

4. Вам придется создать другую переменную для каждого корта или назначить ее самому canvas. Пожалуйста, не задавайте новых вопросов в комментариях. Отправьте новый вопрос.