HTML 5 画布和移动对象答案

【问题标题】：HTML 5 canvas and moving objectsHTML 5 画布和移动对象
【发布时间】：2014-09-17 11:01:47
【问题描述】：

我今天正在查看 HTML 5 画布，我想在画布上移动 3 个圆圈。从我目前所读到的内容来看，我需要每次重新绘制圆圈（每 60 毫秒似乎是一个不错的起点）并清除旧圆圈，以便在屏幕上具有新位置的新圆圈取代它

到目前为止，我有一个draw()，它将渲染 3 个不同颜色的圆圈，其想法是控制每个圆圈。

我在这里寻找一些关于如何初始设置和让每个球移动的指导。

这是我目前所拥有的：

<html>
<head>
    <title>Ball Demo</title>
    <style type="text/css">
        #ball-canvas {
            border: 1px solid #666;
        }
    </style>
</head>
<body>
    <canvas id="ball-canvas" width="900" height="600"></canvas>
    <script>

        function renderCircle(context, x, y, radius, fill) {
            var strokeWidth = 2
            context.beginPath();
            context.arc(x, y, radius - (2 * strokeWidth), 0, 2 * Math.PI, false);
            context.fillStyle = fill;
            context.fill();
            context.lineWidth = strokeWidth;
            context.strokeStyle = '#666';
            context.stroke();
        }

        function draw() {
        renderCircle(context, radius, canvas.height / 2, radius, 'yellow');
        renderCircle(context, canvas.width / 2, canvas.height / 2, radius, 'blue');
        renderCircle(context, canvas.width - radius , canvas.height / 2, radius, 'red');

        }


        var canvas = document.getElementById('ball-canvas');
        var context = canvas.getContext('2d')
        var radius  = 50;


        setInterval(draw, 1000 / 60);

    </script>
</body>

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

下面简要说明如何在 html 画布上移动圆圈：

演示：http://jsfiddle.net/m1erickson/JQQP9/

创建一个定义每个圆的对象：

var circle1={
    x:50,
    y:50,
    radius:25,
}

var circle2={
    x:100,
    y:100,
    radius:25,
}

将这些圆形对象添加到数组中：

var circles=[];

circles.push(circle1);
circles.push(circle2);

创建一个函数来绘制数组中的所有圆。

此函数清除画布并在当前分配的 x,y 处重新绘制所有圆圈：

function draw(){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        context.beginPath();
        context.arc(c.x,c.y,c.radius,0,Math.PI*2);
        context.closePath();
        context.fill();
    }
}

要“移动”圆圈，您可以更改圆圈的 x,y 属性并重新绘制圆圈：

circles[0].x+=1;
circles[1].y+=1;
draw();

要为动作设置动画，您可以考虑查看requestAnimationFrame，它可以有效地创建动画循环。恕我直言，它是除简单动画以外的所有动画的首选循环方法。

var frameCount=0;

animate();

function animate(){
    if(frameCount<160){requestAnimationFrame(animate);}
    circles[0].x+=1;
    circles[1].y+=1;
    draw();
    frameCount++;
}

【讨论】：

感谢您的深入回答，出于兴趣，我如何为每个圆圈添加颜色，它的 fillStyle 不是吗？我可以为javascript对象添加颜色，所以颜色：'#3299CC'，但是fillStyle不接受字符串吗？这有意义吗？
你的直觉是正确的。您可以将fill:"#3299CC" 属性添加到所有圆形对象（如果需要，您可以更改颜色字符串）。然后您可以在绘图函数中执行context.fillStyle=c.fill 以使您的圆圈在其对象中定义填充。干杯！

【解决方案2】：

通常的方法是使用 window.requestAnimationFrame。这基本上可以让您在浏览器检查是否需要重绘屏幕的每一帧中重绘画布。以下是我对您的绘制方法和初始化代码的修改。

    function draw() {
      // schedule another draw for the next animation frame by calling 
      // requestAnimationFrame with itself as a callback
      requestAnimationFrame(draw);

      // clear the canvas (otherwise your circles will leave trails)
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

      // calc a new position for the circles based on the current time
      var now = +new Date();
      var halfWidth = canvas.width / 2; // (waste to recheck each frame)
      var maxX = canvas.width - radius; // to avoid drawing the circles off screen
      var spaceBetween = canvas.width / 3;
      var x1 = (halfWidth + now) % maxX;
      var x2 = (x1 + spaceBetween) % maxX;
      var x3 = (x2 + spaceBetween) % maxX;

      var y = canvas.height / 2;
      var spaceBetween = canvas.width / 3;
      renderCircle(context, x1, y, radius, 'yellow');
      renderCircle(context, x2, y, radius, 'blue');
      renderCircle(context, x3, y, radius, 'red');
    }

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius  = 50;

    // start the animation
    draw();

【讨论】：