Вопросы Теги

Ожидание анимации с холстом html5

Я пытаюсь реализовать анимацию ожидания, подобную упомянутой в этом вопросе , в частности, что-то вроде этого:

enter image description here

Но я не хочу использовать графические файлы, и я пытаюсь реализовать это чисто на холсте html5 и javascript. Кроме того, мне нужен круглый черный фон, а не квадратный. В качестве первого шага я попытался нарисовать статический кадр (без движения / поворота) и сделал следующее:

В результате я получил:

enter image description here

Проблема в том, что lineCap = "round" работает неправильно для всех «прорезей», а атрибут lineWidth = 0 не работает для края круга. Что я делаю неправильно? Я проверил его с помощью Chrome 16.0.912.63 и Firefox 10.0 и получил аналогичные результаты.

На следующем шаге я позволю частям функций, которые я создал выше, взаимодействовать с 

window.animationFrames = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){window.setTimeout(callback, 1000 / 60);};
 })();

, но пока мне нужно сначала решить эту проблему.

6
задан Community 23 May 2017 в 12:13
поделиться