неожиданное поведение при изменении количества ходов CTX - PullRequest
Новая
       19

неожиданное поведение при изменении количества ходов CTX

0 голосов
/ 27 мая 2020

Я делаю набросок в качестве упражнения. Немного накачиваю, чтобы можно было изменить цвет и «скорость». Странно то, что всякий раз, когда я меняю скорость, он ведет себя нормально, пока я не изменю направление. Затем он как бы рисует линию, уходящую в бесконечность. Я понятия не имею, почему, и я не знаю, как его отлаживать.

Вот код JS, который я использовал: 


const canvas = document.querySelector('#etch-a-sketch');
const myButton = document.querySelector('.button');
const ctx = canvas.getContext('2d');
const { height, width } = canvas;
let x = Math.floor(Math.random() * width);
let y = Math.floor(Math.random() * height);

ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 10;

let speed = 10;

ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(x, y);
ctx.lineTo(x, y);

ctx.stroke();

function draw({ key }) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  switch (key) {
    case 'q': // 'ArrowUp' && 'ArrowLeft':
      x -= speed;
      y -= speed;
      break;
    case 'w': // 'ArrowUp' && 'ArrowRight':
      x += speed;
      y -= speed;
      break;
    case 'a': // 'ArrowDown' && 'ArrowLeft':
      x -= speed;
      y += speed;
      break;
    case 's': // 'ArrowDown' && 'ArrowRight':
      x += speed;
      y += speed;
      break;
    case 'ArrowUp':
      y -= speed;
      break;
    case 'ArrowRight':
      x += speed;
      break;
    case 'ArrowLeft':
      x -= speed;
      break;
    case 'ArrowDown':
      y += speed;
      break;

    default:
      break;
  }

  ctx.lineTo(x, y);
  ctx.stroke();
}

function clear() {
  canvas.classList.add('shake');
  ctx.clearRect(0, 0, width, height);
  canvas.addEventListener('animationend', function() {
    canvas.classList.remove('shake');
  });
}

window.addEventListener('keydown', draw);

myButton.addEventListener('click', clear);

// //////////////////////////////////// Speed //////////////////////////////////////
const inputSpeed = document.querySelector('#speed');

function handleUpdatedSpeed() {
  speed = this.value;
}

inputSpeed.addEventListener('change', handleUpdatedSpeed);
inputSpeed.addEventListener('mousemove', handleUpdatedSpeed);

// //////////////////////////////////// Color //////////////////////////////////////
const inputColor = document.querySelector('#couleur');

function handleUpdatedColor() {
  ctx.strokeStyle = this.value;
}

inputColor.addEventListener('change', handleUpdatedColor);
inputColor.addEventListener('mousemove', handleUpdatedColor);

Вот html: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch A Sketch</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="instructions">
    <p>This is similar to an etch-a-sketch. You can move around by using the arrow buttons. You can also move in
      diagonal using: q = &#8598 , w = &#8599, a= &#8601 , s = &#8600</p>
  </div>
  <div class="canvasWrap">
    <canvas width="1600" height="1000" id="etch-a-sketch"></canvas>
  </div>
  <div class="controlers">
    <div class="button">
      <button class="shake">Shake !</button>
    </div>
    <div class="control">
      <label for="speed">Speed:</label>
      <input id="speed" type="range" name="speed" min="1" max="10" value="10">

      <label for="couleur">Color</label>
      <input id="couleur" type="color" name="couleur" value="black">
    </div>
  </div>
  <script src="./etch-a-sketch_2.js"></script>
</body>

</html>

и вот CSS: 


   root:{
     --color: black;
   }
   body {
       min-height: 100vh;
       display: grid;
       align-items: center;
       justify-items: center;
       background: white;
       background-size: cover;
     }

     canvas {
       border: 30px solid #e80000;
       border-radius: 10px;
       /* Set the width and height to half the actual size so it doesn't look pixelated */
       width: 800px;
       height: 500px;
       background: white;
     }

     canvas.shake {
       animation: shake 0.5s linear 1;
     }

     button {
       background: #c0c0c0;
       padding: 1rem;
       border: 0;
       border: 2px solid transparent;
       text-decoration: none;
       font-weight: 600;
       font-size:2rem;
     }

     .controlers div{
       display: inline-block;
     }

     @keyframes shake {

       10%,
       90% {
         transform: translate3d(-1px, 0, 0);
       }

       20%,
       80% {
         transform: translate3d(2px, 0, 0);
       }

       30%,
       50%,
       70% {
         transform: translate3d(-4px, 0, 0);
       }

       40%,
       60% {
         transform: translate3d(4px, 0, 0);
       }
     }
...