Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не работают события через "флаги" в канвас. Помогите, плиз) (https://javascript.ru/forum/events/78331-ne-rabotayut-sobytiya-cherez-flagi-v-kanvas-pomogite-pliz.html)

Иса Мирзоев 28.08.2019 15:50

Не работают события через "флаги" в канвас. Помогите, плиз)
 
Приветствую. Не могу сработать с событиями через т.н. "булевый флаг". По моей задумке, при клике на картинку, должен заливаться канвас, но ничего не происходит(( Прошу помочь.
п.с. другие способы заливки меня не устраивают, нужно иметь понять, как эти "флаги" работают. Тут легкий пример и флаг не нужен толком, но в моем проекте без флага никак. Так что покажите плиз на этом примере. Спасибо.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<img id="photo" src="maxresdefault.jpg"></img>
<canvas id="canvas"></canvas>
</body>
<script src="script.js"></script>
</html>



var canvasBody = document.getElementById("canvas")
var canvas = canvasBody.getContext("2d")

w = canvasBody.width = window.innerWidth
h = canvasBody.height = window.innerHeight

var image = document.getElementById("photo")
var clicked = false

canvas.fillStyle="red"
canvas.strokeStyle="red"
canvas.strokeRect(0,0,100,100)

image.onclick = function(){
clicked = true
}

if(clicked){
    canvas.fillRect(0,0,100,100)
}

Rise 28.08.2019 15:55

При клике срабатывает функция которая указана, но как мы видим в указанной функции нет инструкции заливки.

Иса Мирзоев 28.08.2019 16:24

Цитата:

Сообщение от Rise (Сообщение 512272)
При клике срабатывает функция которая указана, но как мы видим в указанной функции нет инструкции заливки.

Так в этом и задумка: в функции есть изменение флага с "фолс" на "тру". И инструкция в условии, "если флаг на тру, то заливай". Как изменить код, чтобы, при изменении флага с "фолс" на "тру" происходила заливка?

Rise 28.08.2019 16:56

Условие выполняется раньше клика, а после уже только функция клика может что-то менять.
var clicked = false;
image.onclick = function () {
    if (!clicked) {
        clicked = true;
        canvas.fillRect(0, 0, 100, 100);
    }
};
image.onclick = function () {
    if (clicked) return;
    clicked = true;
    canvas.fillRect(0, 0, 100, 100);
};

Иса Мирзоев 28.08.2019 17:22

Цитата:

Сообщение от Rise (Сообщение 512275)
Условие выполняется раньше клика, а после уже только функция клика может что-то менять.
var clicked = false;
image.onclick = function () {
    if (!clicked) {
        clicked = true;
        canvas.fillRect(0, 0, 100, 100);
    }
};
image.onclick = function () {
    if (clicked) return;
    clicked = true;
    canvas.fillRect(0, 0, 100, 100);
};

Изучу. Спасибо.


Часовой пояс GMT +3, время: 15:04.