Question

今天看看HTML 5画布，我想在画布上移动3个圆圈。从我到目前为止读到的内容我需要每次都重绘圆圈（每60毫秒似乎是一个好的起点）并清除旧的圆圈，以便屏幕上新位置的新位置取而代之

到目前为止，我有一个平局（）;这将呈现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。这基本上允许您在浏览器检查是否需要重绘屏幕的每一帧重绘画布。下面是我对draw方法和初始化代码的修改。

    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 个答案: