Рисование холста на основе переменных - PullRequest
Новая
       37

Рисование холста на основе переменных

1 голос
/ 25 января 2020

Я работаю с Arduino и использую акселерометр. Я хочу сделать 2D-линию на основе переменных x и y из акселерометра.

Я пытаюсь сделать это с помощью этого кода: 

board.on("ready", () => {
  const accelerometer = new Accelerometer({
    controller: "MPU6050"
  });
  accelerometer.on("change", function () {
    const {
      acceleration,
      inclination,
      orientation,
      pitch,
      roll,
      x,
      y,
      z
    } = accelerometer;
      const $yPos = y * 100 * 10;
      const $canvas = document.querySelector(`.simulation__line`);
        if ($canvas.childElementCount > 0) {
          $canvas.innerHTML = ``;
        }
      const drawing = $canvas.getContext("2d");
      drawing.beginPath();
      drawing.moveTo(1000, 1000 - $yPos);
      drawing.lineTo(0,  1000);
      drawing.lineTo(-1000, 1000 + $yPos);
      drawing.stroke();
      drawing.clearRect(1000, $yTest, drawing.width, drawing.height);  
  });
});

Так что каждый раз акселерометр меняет переменные, это dr aws новая строка. В результате получается много строк, но я хочу только одну, которая постоянно меняется. Я пытался сделать это с помощью оператора if if ($canvas.childElementCount > 0), но это не поможет.

1 Ответ

0 голосов
/ 26 января 2020

Вот очень простой пример рисования чего-либо на холсте с переменной.
Я считаю, что ваша проблема в том, как вы используете clearRect для очистки холста 

<input type="range" min="1" max="99" value="10" id="slider" oninput="draw()">
<br/>
<canvas id="canvas"></canvas>

<script>
  function draw() {
    y = document.getElementById("slider").value
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(0, y, 250, 3);
  }

  // init canvas
  var canvas = document.getElementById('canvas');
  canvas.height = (canvas.width = 250)/2;
  var ctx = canvas.getContext('2d');
  draw();
</script>

Запустите этот фрагмент кода, чтобы увидеть его в действии.
Ползунок контролирует позицию Y "линии", которую я рисую на холсте, там должно быть быть только одной линией видимой на экране в любое время.

Ключ в том, чтобы стереть экран:
ctx.clearRect(0, 0, canvas.width, canvas.height);
перед тем, как мы что-нибудь нарисоваем

Глядя на свой код, вы делаете несколько вещей внутри "акселерометра" Я имею в виду функцию «изменение», которую вы должны рассмотреть на улице: 

  const $canvas = document.querySelector(`.simulation__line`);
  const drawing = $canvas.getContext("2d");

Они не должны изменяться при изменении акселерометра, поэтому я бы их не пускал

Другой Важным моментом является ваш призыв к: 

  drawing.clearRect(1000, $yTest, drawing.width, drawing.height);
  • , который должен быть первым, прежде чем вы начнете что-либо рисовать
  • , не уверенный, зачем начинать с 1000, $yTest, вы должны очистить весь холст начинаются с 0,0
  • и drawing.width, drawing.height не совпадают с canvas.width, canvas.height, если я изменю это на моем примере, это, конечно, не сотрет холст
...