Ожидание анимации с помощью html5 canvas - PullRequest
Новая
       0

Ожидание анимации с помощью html5 canvas

6 голосов
/ 28 декабря 2011

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

enter image description here

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

<html>
<head><script>
window.onload = function(){
    var c=document.getElementById("waiting").getContext("2d");
    c.lineCap="round";
    c.fillStyle="#353535";
    c.translate(100,100);
    function slit(p){
        shade = 256*p;
        th = 2*Math.PI*p;
        cos = Math.cos(th);
        sin = Math.sin(th);
        c.strokeStyle = '#'+((shade<<16)+(shade<<8)+shade).toString(16);
        c.moveTo(55*cos, 55*sin);
        c.lineTo(84*cos, 84*sin);
        c.stroke();
        c.closePath();
    }
    c.lineWidth=0;
    c.arc(0,0,100,0,Math.PI*2);
    c.fill();
    c.lineWidth=7;
    for(var i = 0;i<1;i+=0.05){slit(i);}
}
</script></head>
<body><canvas id="waiting" width=200 height=200></canvas></body>
</html>

Результат, который я получил:

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);};
 })();

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

Ответы [ 2 ]

3 голосов
/ 28 декабря 2011

Здесь есть некоторая путаница.

Ноль не является приемлемым значением для ширины линии.Спецификация диктует, что если вы скажете lineWidth = 0, что это будет неоперация.

Более того, вы не используете lineWidth, потому что вы не поглаживаете.fill() не учитывает ширину линии.

Что касается другой проблемы, все, что вам нужно сделать, это позвонить beginPath!Смотрите здесь:

http://jsfiddle.net/JfcDL/

Просто добавив beginPath вызов, вы получите это с вашим кодом:

enter image description here

То, что вы делали неправильно, рисовало весь путь до сих пор с каждым новым stroke().Вам нужно позвонить по номеру beginPath, чтобы открыть новый, чтобы stroke относился только к последней детали, а не ко всем сделанным на данный момент деталям.

1 голос
/ 28 декабря 2011

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

<html>
<head><script>
var r1 =  400;
var r2 =  340;
var r3 = 220;
var slitWidth = 40;
var speed = 0.0004;
var attenuation = 1.7;

function rgbToHex(r, g, b){
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

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

window.onload = function(){
    var waiting=document.getElementById('waiting').getContext('2d');
    function slit(d,p){
        shade = Math.round(Math.pow(1-(d+p)%1, attenuation)*255)
        th = Math.PI*2*(p);
        cos = Math.cos(th);
        sin = Math.sin(th);
        waiting.strokeStyle = rgbToHex(shade, shade, shade);
        waiting.beginPath();
        waiting.moveTo(r2*cos, r2*sin);
        waiting.lineTo(r3*cos, r3*sin);
        waiting.stroke();
        waiting.closePath();
    }
    function frame(){
        waiting.arc(0,0,r1,0,Math.PI*2);
        waiting.fill();
        var time = new Date().getTime()* speed;
        for(var p = 1;p>0;p-=0.05){slit(time,p);}
        nextFrame(function(){frame();});
    }
    waiting.lineCap='round';
    waiting.lineWidth=slitWidth;
    waiting.fillStyle='#353535';
    waiting.translate(r1, r1);
    frame();
}
</script></head>
<body><canvas id='waiting' width=800 height=800></canvas></body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...