canvas не работает в условии в функции

157
14 февраля 2019, 02:00

alert("5"); 
var xax = 200; 
var example = document.getElementById("example"), 
  ctx = example.getContext('2d'); 
ctx.fillRect(50, 50, 100, 150); 
ctx.strokeRect(250, 100, 200, 30); 
ctx.fillRect(250, 100, xax, 20); 
window.onload = function() { 
  example.addEventListener("mousedown", onDown, false); 
}; 
 
function onDown(event) { 
  cx = event.pageX; 
  cy = event.pageY; 
 
 
 
  alert("X,Y=" + cx + "," + cy); 
  if (cx > 50 && cx < 150 && cy < 200 && cy > 50) { 
    alert("кнопка"); 
  } 
};
<canvas height='1280' width='720' id='example'>Обновите браузер</canvas>

Я относительно недавно начал изучать js, html и css, поэтому вопросов очень много, а ответов - чуть меньше.

После нажатия кнопки срабатывает функция onDown(event), появляется alert() с координатами позиции мышки, где был произведен клик, и если нажатие было в рамках fillRect(50, 50, 100, 150), то выводится ещё один alert с сообщением кнопка. Хотелось бы ещё вместо alert("кнопка") уменьшать переменную xax на 19, чтобы уменьшалась длинна fillRect с этой переменной. Но, в данном месте, допустим после 32 строки, чтобы я с canvas-ом не делал, никаких изменений на выходе не вижу. Как можно реализовать данную задумку?

Answer 1

Ну я так понял вы это имели в виду. Не знаю в таком случае, в чем сложность.

    // alert("5"); 
var xax = 200; 
 
window.onload = function() { 
  example.addEventListener("mousedown", onDown, false); 
}; 
var example = document.getElementById("example"); 
 var ctx = example.getContext('2d'); 
ctx.fillRect(50, 50, 100, 150); 
	ctx.strokeRect(250, 100, 200, 30); 
	ctx.fillRect(250, 100, xax, 20); 
 
function onDown(event) { 
  cx = event.pageX; 
  cy = event.pageY; 
	 
 
	ctx.fillRect(50, 50, 100, 150); 
	ctx.strokeRect(250, 100, 200, 30); 
	ctx.fillRect(250, 100, xax, 20); 
  // alert("X,Y=" + cx + "," + cy); 
  if (cx > 50 && cx < 150 && cy < 200 && cy > 50) { 
    // alert("кнопка"); 
     xax = xax - 19; 
  } 
	console.log(xax); 
}
<canvas height='1280' width='720' id='example'>Обновите браузер</canvas>

READ ALSO
Не работает callback функция success в ajaxSubmit()
javascript

Не работает callback функция success в ajaxSubmit()

При отправке формы загорается прелоадер и так и остается и не выводится сообщение об успешной загрузкеПри этом в форме предусмотрена отправка...

 158
Вопрос о __proto__
javascript

Вопрос о __proto__

Всем доброго утра! Продолжаю разбирать код который генерирует babelПриведу пример

 131
Притягивание полилиний друг к другу
javascript

Притягивание полилиний друг к другу

подскажите, как организовать притягивание конечных вершин двух полилиний?

 145
MySQL упорядочивание выборки
MySQL

MySQL упорядочивание выборки

У меня имеется таблица, содержащая поля A, B, C, DДопустим, я делаю выборку по данным из полей A и B

 123