为什么我的球不是圆弧形的？

Question

我正在尝试在 javascript 中制作一个小游戏。但现在一开始我的圈子不是圆的......我不知道在搜索 20 分钟后该怎么做。在网上。希望大家能帮帮我。

我的问题是：为什么我的圆不是正圆？

    function Canvas() {
      var ctx = document.getElementById('game').getContext('2d');
      var cw = ctx.canvas.width,
        ch = ctx.canvas.height;
      var snelheid = 1;

      function bal() {
        this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
        this.draw = function() {
          //animation
          this.x = this.x + 1;

          //draw
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
          ctx.fillStyle = "black";
          ctx.closePath();
          ctx.fill();
        }
      }

      function background() {
        this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
        this.draw = function() {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.w, this.h);
        }
      }

      var bal = new bal();
      var background = new background();

      function draw() {
        ctx.save();
        ctx.clearRect(0, 0, cw, ch);

        //draw
        background.draw();
        bal.draw();

        ctx.restore();
      }

      var animateInterval = setInterval(draw, snelheid);
    }

    window.addEventListener('load', function(event) {
      Canvas();
    });

    #game {
      width: 500px;
      height: 500px;
      background-color: ;
      border-style: solid;
      border-width: 4px;
      border-radius: 4px;
      border-color: #A2A2A9;
    }

<html>

<head>
</head>

<body>

  <canvas id="game">
    Please get a new browser!
  </canvas>

</body>
<html>

Answer 1

你需要设置canvas（元素）的宽度和高度，仅仅CSS是不够的，它会导致缩放（可以故意使用）。看到这个：

    function Canvas() {
      var ctx = document.getElementById('game').getContext('2d');
      var cw = ctx.canvas.width,
        ch = ctx.canvas.height;
      var snelheid = 1;

      function bal() {
        this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
        this.draw = function() {
          //animation
          this.x = this.x + 1;

          //draw
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
          ctx.fillStyle = "black";
          ctx.closePath();
          ctx.fill();
        }
      }

      function background() {
        this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
        this.draw = function() {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.w, this.h);
        }
      }

      var bal = new bal();
      var background = new background();

      function draw() {
        ctx.save();
        ctx.clearRect(0, 0, cw, ch);

        //draw
        background.draw();
        bal.draw();

        ctx.restore();
      }

      var animateInterval = setInterval(draw, snelheid);
    }

    window.addEventListener('load', function(event) {
      Canvas();
    });

    #game {
      width: 500px;
      height: 500px;
      background-color: ;
      border-style: solid;
      border-width: 4px;
      border-radius: 4px;
      border-color: #A2A2A9;
    }

<canvas id="game" width="500" height="500">
  Please get a new browser!
</canvas>

我将大小设置为 canvas 元素的 HTML 属性，但你也可以在你的情况下从 JS 中这样做：

var canvas = document.getElementById('game');
canvas.width = 500;   // not the same as canvas.style.width
canvas.height = 500;  // not the same as canvas.style.height

下面是一个使用 CSS 大小来缩放整个 canvas 并保持比例的示例：

    function Canvas() {
      var ctx = document.getElementById('game').getContext('2d');
      var cw = ctx.canvas.width,
        ch = ctx.canvas.height;
      var snelheid = 1;

      function bal() {
        this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
        this.draw = function() {
          //animation
          this.x = this.x + 1;

          //draw
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
          ctx.fillStyle = "black";
          ctx.closePath();
          ctx.fill();
        }
      }

      function background() {
        this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
        this.draw = function() {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.w, this.h);
        }
      }

      var bal = new bal();
      var background = new background();

      function draw() {
        ctx.save();
        ctx.clearRect(0, 0, cw, ch);

        //draw
        background.draw();
        bal.draw();

        ctx.restore();
      }

      var animateInterval = setInterval(draw, snelheid);
    }

    window.addEventListener('load', function(event) {
      Canvas();
    });

    #game {
      width: 250px;
      height: 250px;
      background-color: ;
      border-style: solid;
      border-width: 4px;
      border-radius: 4px;
      border-color: #A2A2A9;
    }

<canvas id="game" width="500" height="500">
  Please get a new browser!
</canvas>

为什么我的球不是圆弧形的？

Why is my ball not round with arc?

javascript

geometry

canvas