Форум

Иса Мирзоев · #1 (**permalink**) 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)
}

Иса Мирзоев · #2 (**permalink**) 28.08.2019, 16:24

Сообщение от Rise

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

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

Иса Мирзоев · #3 (**permalink**) 28.08.2019, 17:22

Сообщение от Rise

Условие выполняется раньше клика, а после уже только функция клика может что-то менять.

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);
};

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

Форум

Справочник

Discord чат

Курсы javascript