Вращение квадрата при нажатии на его угол и его перемещение при нажатии на него (Canvas)

@Dimke931 · Регистрация: 22.08.2013

Студворк — интернет-сервис помощи студентам

Добрый день, я столкнулся с такой проблемой, мне нужно сделать реализацию вращения квадрата при нажатии на его угол и его перемещение при нажатии на него, но я плохо представляю как это сделать. Я вывел рандомно квадратов в кол-ве указанным в инпуте а дальше тупик.
Подскажите как определить на какой именно квадрат нажали, как сделать его проверку, и как его перемещать ил вращать?

Javascript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- <script src="main.js" type="text/javascript"></script> -->
  </head>
  <script>
    function init(){
      var canv = document.getElementById('canv');
      g = canv.getContext('2d'); //переменная для рисования
      maxX = 720; //максимальные и минимальные координаты области рисования
      maxY = 520;
      minX = 80;
      minY = 80;
      minWH = 40; //максимальная и минимальная ширина квадрата
      maxWH = 80;
      rndX = 0; //рандомные координаты начального угла
      rndY = 0; 
      color = 0; //цвет
    }
    function intRand(min, max) { //функция рандома
      return Math.round(min + (max - min) * Math.random());
    }
    function brush () {
      clear_canvas();
      for(var i = 0; i < document.getElementById('in').value; i++) {
        rndX = intRand(minX, maxX); //Определяем случайные координаты
        rndY = intRand(minY, maxY);
        rndWH = intRand(minWH, maxWH);// определяем размер стороны квадрата
        color = 'rgb(' + intRand(0, 255) + ', ' + intRand(0, 255) + ', ' + intRand(0, 255) + ')'; //Определяем рандомный цвет
        g.strokeStyle = color; //задаем цвет
        g.strokeRect(rndX, rndY, rndWH, rndWH);// рисуем квадрат
      }
    }
    function clear_canvas () {
      g.clearRect(0, 0, 800, 600);
    }
    
 
  </script>
  <body onload="init()">
    <input type="text" name="cout" id="in" />
    <button onclick="brush()">Рисование</button>
    <button onclick="clear_canvas()">Очистить форму</button>
    <canvas id="canv" width="800" height="600">
      Старый браузер, обновите
    </canvas>
  </body>
</html>

@Kaktuz · 02.09.2014, 17:45

Мда... Код сыроват конечно. Перемещать в целом это не проблема, а вот вращать, это как? Крутить по часовой стрелке?
Используй "переменные" для записи координат каждого квадрата. Применяй метод "canvas.addEventListener("click", ClickLKM, false);" для получения координат указателя непосредственно на канвасе при нажатии. Таким образом можно определить какой квадрат был нажат.
Для движения придется применить setInterval(); который будет перемещать нужные квадраты и рисовать их новое положение.

@Kaktuz 7 / 7 / 4 Регистрация: 28.05.2012 Сообщений: 169
	02.09.2014, 17:45	2
	Мда... Код сыроват конечно. Перемещать в целом это не проблема, а вот вращать, это как? Крутить по часовой стрелке? Используй "переменные" для записи координат каждого квадрата. Применяй метод "canvas.addEventListener("click", ClickLKM, false);" для получения координат указателя непосредственно на канвасе при нажатии. Таким образом можно определить какой квадрат был нажат. Для движения придется применить setInterval(); который будет перемещать нужные квадраты и рисовать их новое положение. 0

Опции темы