Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   canvas и метод arc (https://javascript.ru/forum/events/33223-canvas-i-metod-arc.html)

Дзен-трансгуманист 16.11.2012 02:36

Цитата:

Сообщение от cyber
почему именно от туда начинаеться и как можно поменять точку начала рисования

Ты мой код читал?
А спецификацию?
Неужели ни то, ни другое?

Дзен-трансгуманист 16.11.2012 03:05

Цитата:

Сообщение от cyber
почему рисует именно с правого края?

Потому что угол 0 - это когда вправо! Ты же сам передаешь ноль в тот аргумент - что тут, блин, непонятного?!

Цитата:

Сообщение от http://www.w3.org/TR/2011/WD-2dcontext-20110525/#dom-context-2d-arc
The points at startAngle and endAngle along this circle's circumference, measured in radians clockwise from the positive x-axis, are the start and end points respectively.


Будь добр, когда спрашиваешь о чем-то - не игнорируй ссылки, которые тебе дают.

cyber 16.11.2012 03:19

Дзен-трансгуманист, сори, весь день седня на тормозе...

Дзен-трансгуманист 16.11.2012 10:18

cyber,
Спеку по Canvas 2D Context реально осилить за 3 дня, если все прочитываемое пробовать сразу же на практике.
То есть, это конечно не значит, что за 3 дня ты всё это впечатаешь себе в мозг как азбуку, но по крайней мере будешь понимать, что к чему и почему.

Ну и, извини конечно, но даже школьнику должно быть известно, что 0° - это вперед по оси X, 90° - вперед по оси Y, и т.д.
Везде и всегда так было, а не только в канвасе. :)

cyber 16.11.2012 10:24

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

dmitriymar 16.11.2012 12:19

ответ попроще на самом деле . сектор круга это не 0 - 2PI , а -PI - +PI как и во всех тригонометрических операциях языка

cyber 16.11.2012 14:46

Дзен-трансгуманист, спасибо твой код помог(особенно moveTo как то не додумался до этого), я вчера жестоко тупил и не пойму с какого перепугу мне вчера казалось что 0 градусов этой прямой угол, в данный момент я понимаю нужно начинать с -90 градусов, но вчера меня жестоко плющило (просто почти не спал вчера).
ctx.arc(150,150,40, -(Math.PI/180)*90,(Math.PI/180)*i,false);


<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <canvas width="500" height="500"></canvas>
    <script>
var canva = document.body.children[0];
      
      var ctx = canva.getContext("2d");
      
      
      var i = -90;
      
      !function drawArc() {
      
       
         if(i>270)return;
        
        
        ctx.clearRect(110,110,80,80);
        ctx.moveTo( 150, 150 );
        ctx.arc(150,150,40, -(Math.PI/180)*90,(Math.PI/180)*i,false);
       ctx.fill();
      ctx.beginPath();
      
      i+=5;
        
        setTimeout(drawArc,60) 
      }();



    </script>

  </body>
</html>

cyber 16.11.2012 17:24

может кто то подкинет идейку, осталось в игре до пилить так что бы проверялись координаты мячика а не его крайняя точка по х , т.е
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <canvas width="500" height="500"></canvas>
    
    <script>

var canva = document.body.children[0];
   var ctx = canva.getContext("2d");   
      
      ctx.fillStyle = "green";
      ctx.strokeRect(50,50,100,100);
      ctx.beginPath();
      
      
      ctx.fillStyle="red";
      ctx.arc(100,100,50,0,(Math.PI/180)*360, false);
      ctx.fill();
      ctx.beginPath();

    </script>

  </body>
</html>


в данный момент сделано так что к х прибавляется или отнимается радиус но так не красиво выглядит когда мячик пролетает очень близко , а условие срабатывает из за того что зацепился углом, не могу придумать как сделать так что проверялись координаты мяча без учета пустого пространства.
Может кто подкинет идейку?

melky 16.11.2012 17:45

Цитата:

Сообщение от cyber
может кто то подкинет идейку, осталось в игре до пилить так что бы проверялись координаты мячика а не его крайняя точка по х , т.е

принадлежность точки окружности => расстояние от точки до центра меньше или равно радиусу.
var radius = 10; // радиус окружности

var center = [ 5, 5 ]; // точка центра окружности

var point = [ 0, 0 ]; // точка, принадлежность которой определяем

// координаты вектора из точки к центру окружности
var x = point[0] - center[0];
var y = point[1] - center[1];

// модуль этого вектора
var distance = Math.sqrt(x*x + y*y);

// принадлежит ли (bool)
var belongs = distance <= radius;

cyber 16.11.2012 21:06

melky, так как шарик может быть в нескольких строках сразу то нужно определить растояние от центра верхней точки ( к примеру) или нижней


Часовой пояс GMT +3, время: 00:36.