Это мой первый опыт работы с 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;
}
Ответ
Канвас работает по принципу экрана монитора. Т.е каждый кадр надо отрисовывать целиком каждый раз.
В вашем случае:
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;
}
Комментариев нет:
Отправить комментарий