6

HTML5 キャンバスを使用して、画像の 1 つのインスタンスを読み込み、それを 1 つのキャンバスに複数回ブリットします。画像をカスタマイズするには、ピクセルベースのわずかな操作が必要です。私の最初の攻撃計画は、画像をロードし、バッキング キャンバスにブリットし、その上に変更を描画し、画像データを取得して、将来の使用のためにキャッシュすることでした。

その趣旨で私が書いたコードを次に示します。

context.drawImage(img, 0, 0);
context.fillStyle = '#ffffff';
context.fillRect(0, 0, 2, 2);  // Draw a 2x2 rectangle of white pixels on the top left of the image

imageData = context.getImageData(0, 0, img.width, img.height);
cusomImage = imageData;

これは機能しますが、私の画像 (透明な PNG) が透明度を維持していないことに気付きました。代わりに、putImageData を使用して前面キャンバスに配置すると、黒の背景でレンダリングされます。透明性を維持するにはどうすればよいですか?

どんな提案も大歓迎です！

4

2 に答える 2

5

putImageData() は、最初に期待することを行いません: http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData() は、キャンバスのピクセルを直接オーバーライドします。そのため、同じキャンバス上の他の何かの上に描画すると、その上に描画されるのではなく、その領域内のキャンバスのピクセルがそのピクセルに置き換えられます。

私はこの正確な問題に遭遇し、ついにその理由を見つけました。

解決策として、私はまだこれを試していませんが、有望なようです: なぜ putImageData がとても遅いのですか?

[編集]:この方法をテストしたところ、問題なく動作し、データの透明度が正しく表示されるようになりました。

于 2011-04-12T02:25:57.770 に答える
0

作成後のキャンバスは真っ黒です。最初に透明にします:

context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, width, height);
于 2011-03-14T08:59:08.123 に答える