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)

melky 15.11.2012 17:34

Цитата:

Сообщение от cyber (Сообщение 216062)
melky, 0,0 находиться по центру.

антитеза какая-то - начало координат находится в центре!

надеюсь, картинка прояснит :


немного поменял твой код - рисуется окружность в (0;0)
Цитата:

Сообщение от cyber (Сообщение 216064)
melky,
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas {
      
        border:1px solid black;
      }
    
    </style>
  </head>
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
    <script>

      var canva = document.getElementById("canvas");
      var ctx = canva.getContext("2d");
      ctx.width = 500;
      ctx.height = 500;
      var radius = 40;
    
      ctx.arc(0,0,radius,0 , (Math.PI/180)* 360);
      ctx.fill();
      ctx.beginPath();
       

    </script>

  </body>
</html>

Цитата:

Сообщение от cyber (Сообщение 216064)
если бы он был с лева в верху то мне можно было смело идти переписывать 70% логики моего арканоида)

мне жаль, что так вышло :D

Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 216072)
Ага, если только translate не применял. ;)

или мы про разные начала говорим?

cyber 15.11.2012 17:46

melky, почитай спецификацию;)

cyber 15.11.2012 17:47

melky,это не спецификация но все же https://developer.mozilla.org/ru/doc...B3%D1%83%D1%80
Цитата:

Сообщение от developer.mozilla.org
Этот метод принимает пять параметров: x и y это координаты центра круга.


melky 15.11.2012 17:51

Цитата:

Сообщение от cyber
melky, почитай спецификацию

спека:
Цитата:

Начало координат этой сетки расположено в верхнем левом углу (координата (0,0)).
в метод arc передаются координаты центра дуги.

что почитать то?

Цитата:

Сообщение от cyber
melky, 0,0 находиться по центру.


cyber 15.11.2012 17:54

melky, для обычных дом элементов да, но не для круга на canvas , метод arc:
Цитата:

Этот метод принимает пять параметров: x и y это координаты центра круга

melky 15.11.2012 19:11

Цитата:

Сообщение от cyber (Сообщение 216163)
melky, для обычных дом элементов да, но не для круга на canvas , метод arc:

см. пост #11

cyber 15.11.2012 19:31

melky, и в посте 11 той код прикрасно доказывает что координаты задаются от центра круга.

Дзен-трансгуманист 15.11.2012 21:23

Цитата:

Сообщение от melky
Цитата:

Сообщение от Дзен-трансгуманист
Цитата:

Сообщение от melky
потому что (0;0) находится слева сверху.

Ага, если только translate не применял.

или мы про разные начала говорим?

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas { border: 1px solid black; }
    </style>
    <script>
      onload = function () {
        var canva = document.getElementById("canvas");
        var ctx = canva.getContext("2d");

*!*
        ctx.translate(canva.width / 2, canva.height / 2);
*/!*
        ctx.arc(0, 0, 40, 0, (Math.PI / 180) * 360, true);
        ctx.fill();
      }
    </script>
  </head>
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
  </body>
</html>

melky,
cyber пытается сказать тебе, что точка (0, 0) в arc будет в фокусе дуги, а не слева сверху от нее.)
Вам надо поработать над взаимопониманием.)

Дзен-трансгуманист 15.11.2012 23:00

Цитата:

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


Окей, не уверен, какого ты хотел достичь эффекта, но например вот:

<!DOCTYPE HTML>
<html>
<head>
<style>
canvas { border: 1px solid black; }
</style>
<script>

function progressFn ( canvas ) {

  var ctx = canvas.getContext( "2d" );
  var cx = canvas.width / 2;
  var cy = canvas.height / 2;
  var radius = 50;

  var clearX = Math.floor( cx - radius );
  var clearY = Math.floor( cy - radius );
  var clearW = Math.ceil( cx + radius ) - clearX;
  var clearH = Math.ceil( cy + radius ) - clearY;

  return function ( progress ) {

    ctx.clearRect( clearX, clearY, clearW, clearH );
    ctx.save();

    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "hsl(120, 80%, 25%)";
    ctx.moveTo( cx, cy );
    ctx.arc( cx, cy, radius, 0, Math.PI * 2 * progress, false );
    ctx.fill();

    ctx.globalCompositeOperation = "xor";
    ctx.font = "bold 20px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText( ( progress * 100 ).toFixed( 0 ) + "%", cx, cy );

    ctx.restore();
  }
}

window.onload = function () {

  var progress = 0;
  var progressMax = 100;
  var showProgress = progressFn( document.getElementById( "canvas" ) );

  var interval = setInterval( function () {

    showProgress( progress / progressMax );
    if ( ++progress > progressMax ) {
      clearInterval( interval );
    }
  }, 50);
}

</script>
</head>
<body>
<canvas width="200" height="200" id="canvas"></canvas>
</body>
</html>

cyber 16.11.2012 01:51

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


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