4

「空」に見えるように不透明なピザを描き、キャンバスを使用して時計回りにフルカラーの画像でピザを徐々に塗りつぶす必要があります。

globalAlpha私は、 1より劣る同じ画像を使用して、「空の」ピザを描くことから始めました。

それから私はその真上に「フル」ピザを描きました。

最後に、ピザのマスクとして円弧を徐々に描画し、それに複合操作を適用しました"destination-atop"。これは、私が望むようにピザを効果的にマスクしますが、最初のピザである「空の」ピザもマスクするという悪影響があります。描いている2番目のピザを非表示にするだけです。

したがって、基本的には、前に描画されたすべてと後に描画されたすべての間ではなく、2つの操作のみの間で合成を行う必要があります。これが私のコードです：

var ratio = 0;
var image = new Image();
image.src = "http://www.pizza.la-recette.net/img/pizza-001.jpg";
image.onload = function() {
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    setInterval(function() {
        ratio += 0.01;
        ratio = ratio % 1;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        //Draw "empty" pizza image
        ctx.globalAlpha = 0.6;
        ctx.drawImage(image, 0, 0);

        //Draw actual pizza image
        ctx.globalAlpha = 1;
        ctx.drawImage(image, 0, 0);

        //Draw mask
        ctx.globalCompositeOperation = "destination-atop";
        ctx.beginPath();
        ctx.moveTo(image.width / 2, image.height / 2);
        ctx.arc(image.width / 2, image.height / 2, image.width / 2, -Math.PI / 2, (-Math.PI / 2) + ((Math.PI * 2) * ratio), false);
        ctx.fill();
    }, 100);
};​

jsFiddle

どうやってやるの？

4

1 に答える 1

3

マスクを描画する代わりに、実際のピザ画像を描画する前にクリッピング領域を作成できます。コードはほとんど同じです。基本的に、への呼び出しをに置き換えてctx.fill()、ctx.clip()2番目を下に移動drawImageします。また、毎回クリッピング領域をリセットするには、コンテキスト状態を使用するsave必要があります。restore

var ratio = 0;
var image = new Image();
image.src = "http://www.pizza.la-recette.net/img/pizza-001.jpg";
image.onload = function() {
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    setInterval(function() {
        ratio += 0.01;
        ratio = ratio % 1;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        //Draw "empty" pizza image
        ctx.globalAlpha = 0.6;
        ctx.drawImage(image, 0, 0);

        ctx.save();

        //Set the clipping region
        ctx.beginPath();
        ctx.moveTo(image.width / 2, image.height / 2);
        ctx.arc(image.width / 2, image.height / 2, image.width / 2, -Math.PI / 2, (-Math.PI / 2) + ((Math.PI * 2) * ratio), false);
        ctx.clip();

        //Draw actual pizza image
        ctx.globalAlpha = 1;
        ctx.drawImage(image, 0, 0);     

        ctx.restore();
    }, 100);
};
于 2012-05-25T18:32:26.050 に答える