0

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-ом не делал, никаких изменений на выходе не вижу. Как можно реализовать данную задумку?

2
  • Вам просто нужно уменьшить значение xax на 19, я правильно понял? 13 окт 2018 в 7:46
  • @ПавелИгоревич, "Хотелось бы ещё вместо alert("кнопка") уменьшать переменную xax на 19, чтобы уменьшалась длинна fillRect с этой переменной". Да, мне надо уменьшать 'xax' на 19, чтобы уменьшался и fillRect с этой переменной вместо длинны. Переменная может и уменьшается, а вот 'fillRect' - нет
    – Lekury
    13 окт 2018 в 9:22

1 ответ 1

0

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

    // 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>

10
  • В этом сложности нет, верно. Но 'fillRect' с переменной 'xax' не уменьшается, а остаётся прежним. Об этом и мой вопрос.
    – Lekury
    13 окт 2018 в 10:36
  • @Lekury исправил, все оказалось куда проще. 13 окт 2018 в 10:59
  • @Lekury не уверен валидно ли это, но изменил! 13 окт 2018 в 11:16
  • Все то же самое, изменений в 'fillRect' нет.
    – Lekury
    13 окт 2018 в 11:18
  • @Lekury а вы до минуса дошли, ? 13 окт 2018 в 11:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.