Вопросы по рисованию дуги в canvas

277
18 октября 2017, 08:31

Это мой первый опыт работы с canvas так что не уверен насчет правильности написания кода. Может быть его можно как-то сократить.

1 Вопрос: При нажатии на кнопку закрашивается дуга, но она какая-то нечеткая, это максимальная плотность пикселей что может выдать canvas, или картинку можно сделать как то четче?

2 Вопрос: Запуская одну и ту же функцию через интервал времени, меняется лишь одно значение, чтобы получить анимацию заполнения дуги, может быть на canvas есть свои функции создания такого рода анимации? (покажите пример)

Библиотеки использовать не хочу, мне бы пока основы на практике понять.

var c = document.getElementById("mycanva"); 
var ctx = c.getContext("2d"); 
c.width = 300; 
c.height = 300; 
ctx.beginPath(); 
ctx.lineWidth = 10; 
ctx.strokeStyle = "#ccc"; 
ctx.arc(120, 120, 90, 0, Math.PI * 2); 
ctx.stroke(); 
number = 0; 
$('button').click(function() { 
  if (number < 87) { 
    progress = setInterval(function() { 
      number = number + 1; 
      deg = Math.PI * 2 / 100 * number; 
      ctx.beginPath(); 
      ctx.lineWidth = 15; 
      ctx.strokeStyle = 'rgb(' + 255 / number * 3 + ', ' + 255 / number + ', ' + number * 3 + ')'; 
      ctx.arc(120, 120, 90, 0, deg); 
      ctx.stroke(); 
      $('.number').text(number + '%'); 
      if (number >= 87) { 
        clearInterval(progress); 
      } 
    }, 1); 
  } 
 
});
.number { 
  font-weight: bold; 
  font-size: 36px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
<button>Тык</button> 
<div class="number">0%</div> 
<canvas id="mycanva"></canvas>

Answer 1

Канвас работает по принципу экрана монитора. Т.е каждый кадр надо отрисовывать целиком каждый раз.

В вашем случае:

1) Дуга не четкая, потому что вы много раз рисуете на одном и том же месте. Т.е. в кажом кадре вы рисуете поверх уже нарисованного. В большинстве случаев надо очищать канвас в каждом кадре.

2) Нет, особых других способов создания анимации нету (или я о них не знаю). Возможно, вместо setInterval можно использовать requestAnimationFrame. Но это уже нужно решать - исходя из конкретной задачи.

var c = document.getElementById("mycanva"); 
var ctx = c.getContext("2d"); 
var ctxWidth = c.width; 
var ctxHeight = 300; 
c.width = ctxWidth; 
c.height = ctxHeight; 
number = 0; 
$('button').click(function() { 
  number = 0; 
  progress = setInterval(function() { 
    ctx.clearRect(0, 0, ctxWidth, ctxHeight); // Очищаем канвас 
    number = number + 1; 
    deg = Math.PI * 2 / 100 * number; 
    ctx.beginPath(); 
    ctx.lineWidth = 15; 
    ctx.strokeStyle = 'rgb(' + Math.round(255 * number / 100) + ', ' + Math.round(100 * number / 100) + ', ' + Math.round(50 * number / 100) + ')'; 
    ctx.arc(120, 120, 90, 0, deg); //Цветная часть 
    ctx.stroke(); 
    ctx.closePath(); 
    ctx.beginPath(); 
    ctx.lineWidth = 10; 
    ctx.strokeStyle = "#ccc"; 
    ctx.arc(120, 120, 90, deg, Math.PI * 2); //Серая часть 
    ctx.stroke(); 
    ctx.closePath(); 
    $('.number').text(number + '%'); 
    if (number >= 87) { 
      clearInterval(progress); 
    } 
  }, 20); 
 
 
});
.number { 
  font-weight: bold; 
  font-size: 36px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
<button>Тык</button> 
<div class="number">0%</div> 
<canvas id="mycanva"></canvas>

READ ALSO
gapi.post.render Как добавить все новости
javascript

gapi.post.render Как добавить все новости

Добрый день, есть необходимость добавлять но портал новости с аккаунта google+, Нашел в документации google api вот такое

 225
Как проверить является ли String, числом формата Long в js
javascript

Как проверить является ли String, числом формата Long в js

Как проверить, является ли строка числом формата Long, а именно long 64 бит от -9223372036854775808 до 9223372036854775807 Пытался сделать простым сравнением, но при...

 204
javascript получить time
javascript

javascript получить time

Хочу получить массив и выдернуть оттуда время

 222
Преобразовать json в формат
javascript

Преобразовать json в формат

Имеется json

 367