Question

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

我的问题是：为什么我的圈子不完美？

＆＃13;

    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();
    });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你需要设置画布（元素）的宽度和高度，只是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大小缩放整个画布并使其保持比例的示例：

    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>

为什么我的球不圆弧？

1 个答案: