「空」に見えるように不透明なピザを描き、キャンバスを使用して時計回りにフルカラーの画像でピザを徐々に塗りつぶす必要があります。
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);
};
どうやってやるの?