лучший способ анимации дуги на холсте

Я ищу лучший/наиболее эффективный способ создания нескольких кругов (дуги) на холсте.лучший способ анимации дуги на холсте

Я видел, что, чтобы создать несколько кругов вы делаете что-то подобное (http://webdesign.about.com/od/html5tutorials/a/draw-circles-on-html5-canvas.htm)

context.arc(x1,y,radius,0,Math.PI,true); 
context.stroke(); 
context.beginPath(); 
context.arc(x2,y,radius,0,Math.PI,false); 
context.stroke(); 
context.beginPath(); 
context.arc(x3,y,radius,0,Math.PI,true); 
context.stroke(); 
context.beginPath(); 
context.arc(x4,y,radius,0,Math.PI,false); 
context.stroke();

То, что я пытаюсь сделать, это иметь 3 или 4 круга в увеличении размера, что я перебрать, оживляющий цвет каждого, оживить от одного цвета и обратно до его первоначального цвета, затем перейти к следующему кругу и повторить. Я просто думаю, могу ли я иметь идентификатор для каждого круга или иметь круги в массиве/объекте, которые я прокручиваю?

Подобно

circles = { 
    circle1 : '', 
    circle2 : '', 
    circle3 : '' 
}

В первом примере, я не вижу, как я бы разжиться каждого круга, чтобы сделать что-то с ним.

источник

2014-02-03 user2075215

«Лучшее и эффективное» очень сильно зависит от вашей ситуации.

быстрый рисунок
Наименее памяти используется
малочисленнее перерисовывает
многие другие возможности!

Это довольно эффективно, поскольку вы предлагаете и помещаете свои определения круга в массив, а затем используете этот массив для рисования ваших кругов.

Вот один пример с использованием массива определений круга для анимации концентрических кругов с изменяющимся цветом.

Демо: http://jsfiddle.net/m1erickson/R5D7M/

enter image description here

Пример кода:

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 
     var cx=150; 
     var cy=150; 
     var PI2=Math.PI*2; 
     var radius=0; 

     // these are the circle definitions kept in an array 
     // each definition holds: radius, color, stroke-width 
     var circles=[]; 

     // add some test circles 
     addCircle(15,"red"); 
     addCircle(15,"green"); 
     addCircle(15,"blue"); 
     addCircle(15,"purple"); 
     addCircle(15,"lightblue"); 
     addCircle(15,"lightgreen"); 
     addCircle(15,"maroon"); 
     var targetIndex=0; 


     function addCircle(lineWidth,color){ 
      if(radius==0){ 
       radius=lineWidth/2; 
      }else{ 
       radius+=lineWidth; 
      } 
      circles.push({radius:radius,color:color,width:lineWidth}); 
     } 


     // draw 1 circle based on its definition 
     // "color" specifies the alternate color for the circle 
     function drawCircle(circle,color){ 
       ctx.beginPath(); 
       ctx.arc(cx,cy,circle.radius,0,PI2); 
       ctx.closePath(); 
       ctx.lineWidth=circle.width; 
       ctx.strokeStyle=color; 
       ctx.stroke(); 
     } 


     // animate at about 1 frame-per-second 
     var fps = 1; 
     function animate() { 
      setTimeout(function() { 
       // request another animation loop 
       requestAnimationFrame(animate); 
       // Drawing code goes here 
       ctx.clearRect(0,0,canvas.width,canvas.height); 
       for(var i=0;i<circles.length;i++){ 
        var circle=circles[i]; 
        var color=circle.color; 
        if(i==targetIndex){ color="gold"; } 
        drawCircle(circles[i],color); 
       } 
       // target the next circle 
       if(targetIndex++ > circles.length){ targetIndex=0; } 
      }, 1000/fps); 
     } 

     // start! 
     animate();   

    }); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4>Each stroked circle will animate to gold color</h4> 
    <canvas id="canvas" width=350 height=350></canvas> 
</body> 
</html>

источник

2014-02-03 21:52:14 markE

мне нужно сделать массив кругов (На somepoint они будут многоножка как INT он аркада игры сороконожка) Я хочу чтобы нарисовать его на холсте, а затем перенести его с верхней части холста на экран, и если он попадает в другой круг, тогда он случайным образом идет в другом направлении. Как в сороконожке. –

Этот вопрос/ответ не связан с вашей игрой сороконожки. Но эти понятия этого ответа могут быть использованы в вашей игре: массив circle [] для хранения определений кругов, функции addCircle() и drawCircle() для создания и рисования кругов в многократном использовании, requestAnimationFrame() для эффективного запуска ваших цикл анимации (с разным кодом анимации, конечно). Поэтому создавайте и кодируйте основы своей игры ... задавайте новые вопросы о Stackoverflow, если у вас возникают проблемы. Удачи вам в вашей игре! – markE

лучший способ анимации дуги на холсте

ответ

Смежные вопросы