Форум

melky · #11 (**permalink**) 15.11.2012, 17:34

Сообщение от cyber

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

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

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

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

Сообщение от cyber

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

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

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

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

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

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

cyber · #12 (**permalink**) 15.11.2012, 17:46

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

cyber · #13 (**permalink**) 15.11.2012, 17:47

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

Сообщение от developer.mozilla.org

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

melky · #14 (**permalink**) 15.11.2012, 17:51

Сообщение от cyber

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

спека:

Цитата:

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

в метод arc передаются координаты центра дуги.

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

Сообщение от cyber

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

cyber · #15 (**permalink**) 15.11.2012, 17:54

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

Цитата:

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

melky · #16 (**permalink**) 15.11.2012, 19:11

Сообщение от cyber

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

см. пост #11

cyber · #17 (**permalink**) 15.11.2012, 19:31

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

Дзен-трансгуманист · #18 (**permalink**) 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 будет в фокусе дуги, а не слева сверху от нее.)
Вам надо поработать над взаимопониманием.)

Дзен-трансгуманист · #19 (**permalink**) 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 · #20 (**permalink**) 16.11.2012, 01:51

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

Форум

Справочник

Discord чат

Курсы javascript