問題タブ [putimagedata]

同じコンテキスト レイヤーに複数のオブジェクトを描画していると、何かに遭遇しました。

これにより、この画像データの領域内のすべてが上書きされます。データが透過的かどうかは関係ありません。

コンテキストに描画する場合とは異なります。

画像の透明な領域が描画された場合でも、設定されている透明な領域と同じように機能します。

だから私の質問は、drawImageで使用される「ImageData」への方法はありputImageDataますか?

これに対する簡単な解決策は別のコンテキストレイヤーになると思いますが、適切にレンダリングされるために同じレイヤーを共有する必要があるいくつかのスプライトタイプがあり、x の感触に関しては見栄えが悪いため、これには適していません。 、y および z の側面。

このリンクに示されている写真のような結果を得るために、2 つの ImageData オブジェクトを 1 つのオブジェクトにブレンドしようとしています。

以下は、2 つの ImageData を持つ Javascript コードです。

キャンバスに配置する前に redData と blueData をマージ/ブレンドするにはどうすればよいですか?

私はpdfを単一のキャンバスにレンダリングしようとしています。以下のリンクを参照して同じものを実装しました。

訪問: pdf.js と ImageData を使用して .pdf を単一の Canvas にレンダリングする

var pdf = null;

PDFが表示されていないページをレンダリングするためのスペースが作成されていることがわかります。

どんな助けでも大歓迎です。ありがとう。

問題が発生しました。画像上の緑の描画ストロークを黄色の描画ストロークに変換したいと考えています。

だから：私は画像を持っています、あなたは画像に描くと緑色の線が見えます. 次に、別のキャンバスで、それらの緑の線を黄色にしたいと思います。

私はこれまでのところこれを持っています：

何が悪いのかわかりません。緑のストロークで左側に画像を描画しますが、右側には何も描画しません。また、 drawImage() を削除すると機能します。（緑と黄色の線を引きます）。

編集: 私の問題を説明するためにフィドルを作成しました: JSFiddleタグ を削除する<img>と、すべてが機能します。しかし、それを追加すると、context2 には何も描画されません。

ところで、キャンバスに関するセキュリティの問題は認識しています。Fiddle では外部ドメインを使用していますが、自分のコードではローカル ファイルを使用しています。

MEMキャンバスの幅×高さのサイズよりも大きい名前付きの配列バッファがあります。そして、arrayBuffer データをキャンバスに描画したいと思います。

imgData.data.set(...)imgData.data は .set hethod を持つ Uint8Array であるため、動作するはずです。FireFox と Chrome では動作しますが、IE では次のエラーが発生します。Object doesn't support this property or method: 'set'

初期化:

リペイント機能: