Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2012, 17:34
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

canvas и метод arc
не совсем пойму как работает метод arc обьекта CanvasRenderingContext2D
как я понял исходя из статьи https://developer.mozilla.org/ru/doc...B3%D1%83%D1%80 и еще нескольких других ctx.arc(x, y , radius ,startAngle,endAngle);
<!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.arc(170,170, 50, 0 , 180);
      ctx.fill();
 
    </script>

  </body>
</html>

проблема именно с параметрами startAngle и endAngle , если startAngle = 0 , а endAngle = 360 - то это будет круг , а если endAngle = 180 - то это полу-круг .
Но как бы я не менял параметр endAngle все равно рисует круг.
Где я туплю?
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2012, 17:50
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

cyber,
углы в радианах а не в градусах радианы = (Math.PI/180)*градусы
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2012, 17:58
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

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

хм.. , еще не совсем понятно, почему рисует именно с правого края?
<!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 up = 360/60, angle = 0;
      
       
      
    !function timer() {
      
      if(angle == 360) return;
      
      angle += up;
      
      ctx.fillStyle = "red";
   
       ctx.arc(100,100, 40, 0,(Math.PI/180)* angle);
      ctx.fill();
      ctx.beginPath();
   
      
   
      
      setTimeout(timer,60);
      
      }();


    </script>

  </body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2012, 23:11
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

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(100,0,radius,0 , (Math.PI/180)* 360);
      ctx.fill();
      ctx.beginPath();
       
      ctx.arc(200,radius,radius,0 , (Math.PI/180)* 360);
      ctx.fill();
      ctx.beginPath();
    

    </script>

  </body>
</html>

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

cyber,
Сделай мячик спрайтом и не ипи себе мозг. =)

BTW, указывай параметр anticlockwise, пожалуйста, а то не везде без него работает.
__________________

Гейзенберг, возможно, читал этот тред.
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2012, 03:14
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

Сообщение от melky
потому что (0;0) находится слева сверху.
Ага, если только translate не применял.
__________________

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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