0

友人から、アニメーション GIF をキャンバスに変更できるかどうかを確認するように依頼されました。モバイルで 3G 経由で表示すると GIF が圧縮され、グラデーションが「直線的」になると彼は言います。

これがターゲットhttp://patgaunt.co.uk/logo.gif

これは私がこれまでに得た場所ですhttp://patgaunt.co.uk/logo.html

ご覧のとおり、形状はほぼ正しいですが、グラデーションはキャンバス全体の一般的なグラデーションではなく、線に沿っている必要があります。また、上部にループするため、重なり合っているように見えるように、ある程度の不透明度が必要です。最後に、例のように線をアニメーション化する必要がありますが、これを行う方法がわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

1

3 つの透明度レベルがあるため、少なくとも 3 回ストロークする必要があります。次のようにグラデーションを透明にしますtGrad.addColorStop(0, "transparent");。

そのままにして申し訳ありませんが、プロジェクトの構造を作成しました。目標を達成するのに役立つはずです。私の構造は次のようになります: http://jsfiddle.net/sadaf2605/JzbG2/

ヘルパー コード:

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var context2 = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

//gradient for circle
        var grad = context.createLinearGradient(50, 50, 150, 150);
        grad.addColorStop(0, "#315164");
        grad.addColorStop(1, "#55a1ce");
        context.strokeStyle = grad;
        context.lineCap = "round";

//drawing circle
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.lineWidth = 22;
        context.stroke();
//circle ends

//gradient for straight line1
        context.beginPath();
        var t1Grad=context.createLinearGradient(50, 50, 150, 150);
        t1Grad.addColorStop(0.3, "transparent");
        t1Grad.addColorStop(1, "#55a1ce");
         context.strokeStyle=t1Grad;

//drawing straight line1
        context.moveTo(170, 35);
        context.lineTo(170, 50);
        context.stroke();

 //gradient for straight line1
        context.beginPath();
        var t2Grad=context.createLinearGradient(50, 50, 150, 150);
        t2Grad.addColorStop(0.3, "transparent");
        t2Grad.addColorStop(1, "#55a1ce");
         context.strokeStyle=t2Grad;

//drawing straight line1
        context.moveTo(170, 35);
        context.lineTo(170, 165);
        context.stroke();
于 2013-03-05T21:58:47.267 に答える