Question

当前，我有一个画布，它是浏览器的宽度和高度。使用此代码：

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;

var canvas = document.getElementById("canvas");
var width = window.innerWidth;
var height = window.innerHeight;
var circle = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;


for(var i = 0; i < numofcirc; i++)
{
  name = "circleno" + i;
  var name = new Array(3); 
  name = [height, rndwidth, rndradius, vel]
  circles[i] = name;
}


var vel = 2;
var circles = [];
var numofcirc = 1;
var name;

function DrawCircle()
{
  rndwidth = Math.floor((Math.random() * width) + 1);
  height = height - 13;
  rndradius = Math.floor((Math.random() * 15) + 5);

  circle.beginPath();
  circle.arc(rndwidth, height, rndradius, 0, 2*Math.PI);
  circle.fillStyle = "white";
  circle.fill();
  circle.translate(0,6);
}

function Move() 
{
  circle.translate(0,6);
  requestAnimationFrame(Move);
}

Move();
DrawCircle();

我可以创建一个随机放置在屏幕底部的圆圈。无效的代码是这样的：

function Move() 
{
  circle.translate(0,6);
  requestAnimationFrame(Move);
}
Fireworks();

调用DrawCircle();时，圆会绘制在画布上。然后调用Move();。因为它使用requestAnimationFrame函数Move();一遍又一遍地重复。我希望此代码将绘制的圆向上移动6，因此看起来圆向上移动。如果我将circle.translate(0,6);添加到DrawCircle();函数并将DrawCircle();函数更改为此：

function DrawCircle()
{
  rndwidth = Math.floor((Math.random() * width) + 1);
  height = height - 13;
  rndradius = Math.floor((Math.random() * 15) + 5);
  circle.beginPath();
  circle.arc(rndwidth, height, rndradius, 0, 2*Math.PI);
  circle.fillStyle = "white";
  circle.fill();
  circle.translate(0,6);
  requestAnimationFrame(Move);
}
DrawCircle();

然后继续在屏幕上绘制所有由6隔开的圆圈行。

有什么办法让我画一个圆圈在屏幕上向上移动吗？

谢谢您对@HelderSepu的帮助！

Answer 1

由于出现了一系列的圆圈，因此绘制框架时似乎没有清除画布。只需在需要新框架时绘制一个填充画布的白色矩形，然后绘制圆圈即可。

您作为requestAnimationFrame的参数提供的方法负责在画布上绘制完整的图像，该图像将替换上一帧中的所有图像。

Answer 2

您应该查看示例并以此为基础...

这是一种简单的情况：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvas.height = 170;

var circles = []
circles.push({color:"red",   x:120, y:120, r:15, speed:{x: 0,    y: -0.5}})
circles.push({color:"blue",  x:80,  y:120, r:20, speed:{x: -0.5, y: -2.5}})
circles.push({color:"green", x:40,  y:120, r:5,  speed:{x: -1.5, y: -1.0}})

function DrawCircle() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  circles.forEach(function(c) {
    c.x += c.speed.x;
    c.y += c.speed.y;
    
    context.beginPath();
    context.arc(c.x, c.y, c.r, 0, 2 * Math.PI);
    context.fillStyle = c.color;
    context.fill();
    
    if (c.x < 0) c.x = canvas.width
    if (c.y < 0) c.y = canvas.height
  });

  window.requestAnimationFrame(DrawCircle);
}

DrawCircle();

<canvas id="canvas"></canvas>

但是，如果您要制作更多的动画，则应该考虑使用游戏引擎，
有很多很棒的开源软件：
https://github.com/collections/javascript-game-engines

使形状在画布上向上移动

2 个答案: