HTML5: рисование прямоугольника за круглым углом в качестве анимации - PullRequest
Новая
       46

HTML5: рисование прямоугольника за круглым углом в качестве анимации

1 голос
/ 20 ноября 2011

Я могу нарисовать прямоугольник с закругленным углом со следующим кодом. Я хочу создать анимацию, начиная с одной точки и рисуя линию, которая заканчивается в начальной точке. (как рисование карандашом) Есть идеи? 

ctx.beginPath(); 
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius); 

  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);  
  ctx.lineTo(x+width-radius,y+height);  
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);  
  ctx.lineTo(x+width,y+radius);  
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);  
  ctx.lineTo(x+radius,y);  
  ctx.quadraticCurveTo(x,y,x,y+radius);  
  ctx.stroke();

Ответы [ 2 ]

1 голос
/ 22 ноября 2011

Холсты с двойной буферизацией.Вам нужно будет отложить каждый шаг анимации, используя setTimeout(), чтобы дать холсту возможность нарисовать ваши изменения. Обновление: См. requestAnimationFrame как альтернативу setTimeout().

Я создал один пример для вас, который рисует каждый из сегментов вашего прямоугольника, вызываяконтекстный метод и пауза.Я думаю, что знаю конкретную анимацию, которую вы ищете, и это не так, но, надеюсь, она даст вам хорошее начало.

Код ниже и демонстрация здесь: http://jsfiddle.net/q8GcR/ 

function animateRoundRect(ctx, x, y, width, height, radius, delay) {
    commands = [
        ['moveTo', x,y+radius],
        ['lineTo', x,y+height-radius], 
        ['quadraticCurveTo', x,y+height,x+radius,y+height],  
        ['lineTo', x+width-radius,y+height],  
        ['quadraticCurveTo', x+width,y+height,x+width,y+height-radius],  
        ['lineTo', x+width,y+radius],  
        ['quadraticCurveTo', x+width,y,x+width-radius,y],  
        ['lineTo', x+radius,y],  
        ['quadraticCurveTo', x,y,x,y+radius]
    ];  

    function draw() {
        var args = commands.shift();
        var method = args.shift();
        ctx[method].apply(ctx, args);
        ctx.stroke();
        if (commands.length) {
            setTimeout(draw, delay);
        }
    }

    ctx.beginPath();
    draw();
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
ctx.strokeStyle = '#f00';
animateRoundRect(ctx, 20, 20, 250, 100, 10, 500);
0 голосов
/ 21 ноября 2011

некоторые дефекты, такие как - контур неочищен, код может не соответствовать, последняя очистка делает холст полностью белым.Может кто-нибудь улучшить этот код?Просьба запустить код в Firefox или Chrome.

код: http://jsfiddle.net/XnzhQ/1/

...