HTML 5 画布和移动对象

Question

I am having a look at HTML 5 canvas today and I would like to move 3 circles on the canvas.我今天正在看 HTML 5 画布，我想在画布上移动 3 个圆圈。 From what I have read so far I need to redraw the circles each time (every 60 miliseconds seems like a good place to start) and clear out the old circle so that the new one with its new position on the screen takes its place从我到目前为止所读到的内容，我每次都需要重新绘制圆圈（每 60 毫秒似乎是一个很好的起点）并清除旧圆圈，以便在屏幕上具有新位置的新圆圈取而代之

So far I have a draw() that will render 3 circles each of a different colour, the idea is to take control of each circle.到目前为止，我有一个draw()可以渲染 3 个不同颜色的圆圈，这个想法是控制每个圆圈。

I am looking for some guidance here on how to initially set this up and get each ball moving.我在这里寻找一些关于如何初始设置并让每个球移动的指导。

This is what I have so far:这是我到目前为止：

<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

Here's a brief description of how to move circles on html canvas:下面简单介绍一下如何在html画布上移动圆圈：

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

Create an object that defines each circle:创建一个定义每个圆的对象：

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

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

Add these circle objects to an array:将这些圆对象添加到数组中：

var circles=[];

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

Make a function that will draw all circles in the array.创建一个函数来绘制数组中的所有圆圈。

This function clears the canvas and redraws all circles at their currently assigned x,y:此函数清除画布并在当前指定的 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();
    }
}

To "move" the circles you change the x,y properties of a circle and redraw the circles:要“移动”圆，您可以更改圆的 x,y 属性并重新绘制圆：

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

To animate the movements, you might consider checking out requestAnimationFrame which efficiently creates an animation loop.要为运动设置动画，您可以考虑查看requestAnimationFrame ，它可以有效地创建动画循环。 IMHO, it is the preferred looping method for all but simple animations.恕我直言，它是除简单动画之外的所有动画的首选循环方法。

var frameCount=0;

animate();

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

Answer 2

The usual way to do this would be to use window.requestAnimationFrame.通常的方法是使用 window.requestAnimationFrame。 This will essentially let you redraw the canvas every frame that the browser checks if it needs to redraw the screen.这基本上可以让您在浏览器检查是否需要重绘屏幕的每一帧中重绘画布。 Below is my modification of your draw method and initialization code.下面是我对你的绘制方法和初始化代码的修改。

    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