Question

我正在玩游戏以在画布上玩，并且想要使用javascript为背景图层添加一些氛围。首先，这是代码...

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext("2d");
  var x = canvas.width/2;
  var y = canvas.height-150;
  var dx = Math.random() * (-5 * 5) + 15;
  var dy = -15;

  function drawDot() {
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI*2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
  };

  function move() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawDot();
      x += dx;
      y += dy;
  };
setInterval(move, 50);

如果你运行它，你可以看到我所拥有的是一个黑色的球，它在一个随机的锥形空间内向上移动。我需要帮助的是找出最好的方法：
A.用更多的球（可能是2-3）填充它们，这些球在他们自己的随机轨迹上，和 B.使得2-3个球在相同的起始区域（类似于恒定喷射喷泉效果）的页面随机锥形区域内不断地动画化。

我已经看到的一个问题是，通过使用控制台日志，我现在只有1个工作球在画布外面不断进入无限远，所以当我尝试添加一个新的时，它不会运行功能。我是javascript的新手，尤其是画布，如果这很明显，那么道歉！感谢您对此的任何帮助！

Answer 1

Seb Lee-Delisle就这个确切的问题提供了一个很好的教程：

https://vimeo.com/36278748

基本上你必须封装每个Dot，以便它知道自己的位置和加速度。

编辑1

以下是使用您自己的代码的示例：

document.body.innerHTML = '<canvas height="600" width="600" id="myCanvas"></canvas>';
clearInterval(interval);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var dotArray = [];

function Dot() {
    var dot = {
        y : canvas.height / 2,
        x : canvas.width / 2,
        speedX : Math.random() * ( - 5 * 5) + 15,
        speedY : Math.random() * ( - 5 * 5) + 15,
        age : 0,
        draw : function () {

            this.x += this.speedX;
            this.y += this.speedY;

            ctx.beginPath();
            ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.closePath();
        }
    };
    return dot;
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < dotArray.length; i++) {
        dotArray[i].draw();
        dotArray[i].age++;
        if (dotArray[i].age > 20) {
            dotArray.splice(i, 1);
        }
    }
    dotArray.push(new Dot());
}

draw();
var interval = setInterval(draw, 1000 / 60);

坚持使用canvas / JS动画

1 个答案: