HTML 5 画布和移动对象

Question

我今天正在看 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>

Answer 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++;
}

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

HTML 5 画布和移动对象

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-07-25 15:06:32

解决方案2
1 2014-07-25 15:07:52

HTML 5 画布和移动对象

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-07-25 15:06:32

解决方案2 1 2014-07-25 15:07:52

解决方案1
2 已采纳 2014-07-25 15:06:32

解决方案2
1 2014-07-25 15:07:52