6

複数の四角形を描画してから、globalCompositeOperation 'source-in' を使用してそれらをマスクしようとしていますが、問題は、四角形を塗りつぶすと消えてしまうことです... fill() 呼び出しが 1 つしかない場合、それらはすべて適切に描画されますただし、最後に適用された塗りつぶしスタイルのみを尊重します。

問題のコード -

ctx.drawImage(self.glass.mask, 256, 375);
ctx.globalCompositeOperation = 'source-in';

ctx.rect(256, 635, 256, 75);
ctx.fillStyle = "#c65127";

ctx.rect(256, 605, 256, 25);
ctx.fillStyle = "#f5f4f0";

ctx.rect(256, 565, 256, 35);
ctx.fillStyle = "#c65127";

ctx.fill();

上記のコードは正常に動作します。しかし、これを行ってマスクを外すと -

ctx.beginPath();
ctx.rect(0, 256, 256, 75);
ctx.fillStyle = "#c65127";
ctx.fill();

ctx.beginPath();
ctx.rect(0, 226, 256, 25);
ctx.fillStyle = "#f5f4f0";
ctx.fill();

ctx.beginPath();
ctx.rect(0, 186, 256, 35);
ctx.fillStyle = "#222";
ctx.fill();

私はそれぞれの長方形を持っており、それらは塗りつぶしスタイルを尊重しています。問題は、マスクを有効にすると表示されなくなることです。

globalCompositeOperation 'source-in' の下に持つことができる要素の数に制限はありますか、それとも単純なものが不足していますか?

ここにいくつかのフィドルがあります-

http://jsfiddle.net/ENtXs/ - 期待どおりに動作しますが、塗りつぶしスタイルを尊重しません。

http://jsfiddle.net/ENtXs/1/ - マスクを削除してすべての要素を表示する

http://jsfiddle.net/ENtXs/2/ - beginPath() および fill() 要素を追加すると、塗りつぶしスタイルが考慮されます。(マスキングなし)

http://jsfiddle.net/ENtXs/3/ - マスクを追加し直します (もう何も表示されません)

http://jsfiddle.net/ENtXs/4/ - #3 と同じコードの四角形が 1 つだけあれば正しく動作します。

4

1 に答える 1

1

解決した

問題は globalCompositeOperation 'source-in' にあると思います。私が最終的にやったのは、図形を描画するバッファー キャンバスを作成し、その画像データを取得してプライマリ キャンバスに描画し、それに GCO を適用することでした。

ここに実用的なフィドルがあります - http://jsfiddle.net/ENtXs/5/

問題のコード:

// Canvas and Buffers
var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
var ctx = canvas.getContext('2d');
var buffer_ctx = buffer.getContext('2d');

// sizing
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

buffer.height = window.innerHeight;
buffer.width = window.innerWidth;

// mask image
var mask = new Image();
mask.onload = function () {
    drawBuffer();
}

mask.src = 'http://drewdahlman.com/experiments/masking/highball_mask.png';

function drawBuffer() {
    buffer_ctx.beginPath();
    buffer_ctx.rect(0, 256, 256, 75);
    buffer_ctx.fillStyle = "#c65127";
    buffer_ctx.fill();

    buffer_ctx.beginPath();
    buffer_ctx.rect(0, 226, 256, 25);
    buffer_ctx.fillStyle = "#f5f4f0";
    buffer_ctx.fill();

    buffer_ctx.beginPath();
    buffer_ctx.rect(0, 186, 256, 35);
    buffer_ctx.fillStyle = "#222";
    buffer_ctx.fill();

    var image = buffer.toDataURL("image/png");
    var img = new Image();
    img.onload = function(){
        buffer_ctx.clearRect(0,0,buffer.width,buffer.height);
        ctx.drawImage(mask,0,0);
        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(img,0,0);
    }
    img.src = image;
}
于 2013-10-22T17:03:03.590 に答える