Как нарисовать и анимировать линию - кривую Безье на canvas?

Рейтинг: 1Ответов: 1Опубликовано: 14.04.2015

Все привет!) Нужно при загрузки страницы нарисовать кривую Безье. После того, как она порисуется, необходимо ее координаты изменять плавно, чтобы был эффект "плаванья"

Прикладываю гиф изображение, как примерно должно быть рандом

На данном этапе добилась с помощью svg рисование кривой безье.

http://jsfiddle.net/0mhkx4qd/

Подскажите, как можно "заставить" ее двигаться рандомно по заданной траетории? В какую степь двигаться?

Спасибо!

javascript canvas анимация
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

    var canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;
    
    document.body.appendChild(canvas);
    
    var AMPLITUDE_START_VALUE = 50;
    var amplitude = AMPLITUDE_START_VALUE;
    
    var context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(50, 400);
    context.bezierCurveTo(450,amplitude,200,100,200,20);
    context.stroke();
    
    requestAnimationFrame(enterFrame)
    
    var object = {
    	direction: 1,
    	speed: .5
    };
    
    function change(){
    	object.direction *= -1;
    }
    
    function enterFrame(){
    	if(amplitude > 70|| amplitude < 50){
    		change();
    	}
    
    	amplitude += object.speed * object.direction;
    
    	canvas.width = canvas.width;
    	requestAnimationFrame(enterFrame);
    	context.moveTo(50, 400);
    	context.bezierCurveTo(450,450,200,100,200,amplitude);
    	context.stroke();
    	
    }