VPF::canvas requestAnimationFrame - Форум программистов

Mikron

Дата 10.7.2016, 18:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 50
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Здравствуйте, подскажите почему так рисуется график синуса
Вот так если оставить вызов функции в animloop

Код


<script>
    window.addEventListener("load", eventWindowLoaded, false);
    function eventWindowLoaded () {
        canvasApp();
    }

    function canvasApp() {
        var theCanvas = document.getElementById("canvasOne");
        var context = theCanvas.getContext("2d");
        if (!theCanvas || !theCanvas.getContext) {
            return;
        }
        window.requestAnimFrame = (function(){
            
            return    window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function( callback ){
                        window.setTimeout(callback, 1000 / 60);
                    };
        })();

        (function animloop(){
            requestAnimFrame(animloop);
            drawScreen();
        })();

        drawScreen();

        var x1 = 0,
            y1 = 0;
        
        context.lineWidth = 2;

        function drawScreen(){

            context.moveTo(x1, y1);

            for(y1=1;y1<200;y1+=0.1){
                x1 = 50 * Math.exp(-0.01*y1)*Math.sin(0.15*y1)+80;
                context.lineTo(x1, y1);
            }
            context.stroke();
        }
    }
</script>

а вот так если закомментировать вызов функции в цикле

user posted image

Спасибо за помощь

Это сообщение отредактировал(а) Mikron - 10.7.2016, 18:56

ksnk

Дата 10.7.2016, 20:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вообще-то это не график синуса smile

Если вопрос в том, почему рисуется странные прямые отрезки поперек графика - то нужно перед рисованием линии ставить ПЕРВУЮ точку методом moveTo, а все последующие - lineTo. Так как сейчас - начинается рисование от (0,0) и по окончании рисования первого цикла - рисуется линия до начала первой точки следующего.

Код


...
(function animloop(){
           // requestAnimFrame(animloop);
            drawScreen();
        })();
        drawScreen();
        context.lineWidth = 2;
        function drawScreen(){
            for(var y1=1;y1<200;y1+=0.1){
                var x1 = 50 * Math.exp(-0.01*y1)*Math.sin(0.15*y1)+80;
                context[y1==1?'moveTo':'lineTo'](x1, y1);
            }
            context.stroke();
        }

Можно вот так переписать хвостик рисовалки. И переменных меньше

P.S. добавил var, чтобы не плодились глобальные переменные

Это сообщение отредактировал(а) ksnk - 11.7.2016, 10:08

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »