0

制作js动画，它不会从屏幕底部反弹，我用js和html制作的一无所知制作者：hex

~js & html~


    var canvas = document.querySelector('canvas');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    var c = canvas.getContext('2d');


    var x = Math.random() * innerWidth;
    var y = Math.random() * innerHeight;
    var dx = (Math.random() - 0.5) * 3;
    var dy = (Math.random()  - 0.5) * 3;
    var radius = 30;
    function animate(){
      requestAnimationFrame(animate);
      c.clearRect(0, 0, innerWidth, innerHeight );
     
      c.beginPath();
      c.arc(x, y,  radius, 0, Math.PI* 2, false);
      c.strokeStyle = 'darkblue';
      c.stroke();
      
      if (x + radius > innerWidth || x - radius < 0){
          dx = -dx;
      }
      

      if (y + radius > innerHeight || y - radius < 0){
      dy += -dy;
      
    }

    x += dx;
    y += dy;
    }
    animate();


    console.log(innerHeight);
```
here is html
```

    <!DOCtype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Animation</title>
        <style type="text/css">
          canvas {
            border:1px solid black;
            background:white;
          }
          
          body {
            margin: 0;
          }
          
        </style>
      </head>
      
      <body>
        <canvas></canvas>
        <script src="Canvas.js"></script>
      </body>
    </html>

```

我做错了什么？？？？？我正在学习js动画，Y出现错误这是我检查过的代码多次抛出代码，但我找不到我做错了什么，它说没有错误，它似乎工作，然后坚持年龄的底部，为什么？

4

0 回答 0