1

次のコードで角の丸い長方形を描くことができます。私が探しているのは、これをアニメーションとして形成したいということです-ある点から始めて、始点で終わる線を描きます。（鉛筆で描くような）何かアイデアはありますか？

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

2 に答える 2

1

キャンバスはダブル バッファリングされます。setTimeout()キャンバスに変更を描画する機会を与えるために、アニメーションの各ステップを延期する必要があります。更新:requestAnimationFrameの代わりに を参照してくださいsetTimeout()。

コンテキスト メソッドを呼び出して一時停止することにより、四角形の各セグメントを描画する 1 つの例を作成しました。私はあなたが探している特定のアニメーションを知っていると思いますが、これはそうではありませんが、うまくいけば良いスタートを切れます.

以下のコードとデモはこちら: 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);
于 2011-11-22T06:15:04.687 に答える
0

次のようないくつかの欠陥-アウトラインが粗い、コードがマークされていない可能性がある、最後のクリアでキャンバスが完全に白くなっている. 誰かがこのコードを拡張できますか?. Firefox または Chrome でコードを実行してください。

コード: http://jsfiddle.net/XnzhQ/1/

于 2011-11-21T16:12:51.320 に答える