Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 15.11.2012, 17:34
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от 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 не применял.
или мы про разные начала говорим?
Ответить с цитированием
  #12 (permalink)  
Старый 15.11.2012, 17:46
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

melky, почитай спецификацию
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #13 (permalink)  
Старый 15.11.2012, 17:47
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

melky,это не спецификация но все же https://developer.mozilla.org/ru/doc...B3%D1%83%D1%80
Сообщение от developer.mozilla.org
Этот метод принимает пять параметров: x и y это координаты центра круга.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #14 (permalink)  
Старый 15.11.2012, 17:51
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

Сообщение от cyber
melky, 0,0 находиться по центру.
Ответить с цитированием
  #15 (permalink)  
Старый 15.11.2012, 17:54
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

melky, для обычных дом элементов да, но не для круга на canvas , метод arc:
Цитата:
Этот метод принимает пять параметров: x и y это координаты центра круга
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #16 (permalink)  
Старый 15.11.2012, 19:11
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от cyber Посмотреть сообщение
melky, для обычных дом элементов да, но не для круга на canvas , метод arc:
см. пост #11
Ответить с цитированием
  #17 (permalink)  
Старый 15.11.2012, 19:31
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

melky, и в посте 11 той код прикрасно доказывает что координаты задаются от центра круга.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #18 (permalink)  
Старый 15.11.2012, 21:23
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

Сообщение от 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:15.
Ответить с цитированием
  #19 (permalink)  
Старый 15.11.2012, 23:00
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

Сообщение от 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>
__________________

Гейзенберг, возможно, читал этот тред.
Ответить с цитированием
  #20 (permalink)  
Старый 16.11.2012, 01:51
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Дзен-трансгуманист,тут суть не в том что я не могу анимацию сделать, мне просто интересно почему именно от туда начинаеться и как можно поменять точку начала рисования..
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 16:57
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
Добавить свой метод к элементу alekciy Events/DOM/Window 6 16.02.2009 19:29