Why is my ball not round with arc?

I am trying to make a little game in javascript. But now at the start my circle is not round... I don`t know what to do after searching for 20 min. on the internet. Hopefully you guys can help me.

My question is: Why is my circle not perfect round?

    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>

标签： javascript canvas geometry

1条回答

等我变得足够好

2楼-- · 2019-06-07 07:22

You need to set the canvas (the element) width and height, just CSS is not enough and it will cause scaling (which could be used on purpose). See this:

    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>

I set the size as HTML attributes of the canvas element, but you can also do it from JS like this in your case:

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

Here's an example of using CSS size to scale the whole canvas and keep it proportional:

    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>

0人赞添加讨论(0) 举报

Why is my ball not round with arc?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间