問題タブ [drawimage]

バッファリングメソッドを使用してキャンバスを更新します。バッファキャンバスに画像を描画して実際のキャンバスに適用すると、実際のキャンバスには画像がありません。しかし、私は他のものを実際のキャンバスに適用することができます。

これは私のコードです：

1. キャンバスがベクトルのビットマップを描画しているため（ビットマップはパスではないため）、これは機能しないと思います。
2. それが機能したとしても、ビットマップには常に長方形の許可があります。

isPointInPath使用するときのようなものを活用する方法はありますdrawImageか？

例：

• 上部のキャンバスはを使用して描画されdrawImage、isPointInPath機能しません。
• 下部のキャンバスはを使用arcして描画され、isPointInPath機能します。

私の証明へのリンク

** 編集 **

1つのキャンバスに円を描き、isPointInPathマウスポインタが円の内側にあるかどうかを確認するために使用します（この例では下のキャンバス）。また、を使用して下部のキャンバスを上部のキャンバスに「コピー」しますdrawImage。上部のキャンバスでは機能しないことに注意してくださいisPointInPath（おそらく上記の理由による）。あらゆる種類のパス（またはビットマップ）で機能する回避策はありますか？

drawImageを機能させる方法がわかりません...何もしません（説明が定義されていない例外をスローすることを除いて）：

私は2つのキャンバスを持っています。1つはレイヤーで、もう1つはマウスを使用して描画するためのものです。ユーザーが最初のキャンバスに描いたものをレイヤーに保存し、不透明度を適用したい...すべてのコードを提供するわけではありませんが、次のコードが機能することを知っておく必要があります。

ただし、以前の不透明度は使用できないため、他のstackoverflow.com関連の質問でアドバイスされているように、canvas要素でdrawImageを使用したいと思います。

ctxは私のキャンバスcvsのコンテキストであり、
layerCtxは私のキャンバスレイヤーのコンテキストです

drawImage を使用して、キャンバス要素に半透明の PNG を描画しようとしています。ただし、画像は完全に不透明に描画されます。読み込まれているリソースを見て、実際の PNG をブラウザーに読み込むと透明度が表示されますが、キャンバスに描画すると透明度が表示されません。何か案は？

コードは次のとおりです。

これは説明するのが奇妙かもしれません。単一の画像を持つキャンバスのコレクションを動的に作成したいと考えています。そして、これは（多くの面倒と onload イベントを取り除いた後）表示されますが、ページを更新しようとすると、画面に何も表示されないことがあります。そして、(画像が読み込まれるまで待機するために) onload イベントを使用していたとき、最後のキャンバスにすべてが表示されなかったり、表示されたりしませんでした。

コードのスニペットを次に示します。

私のように見える多くの投稿を見て、かなりの数を試しましたが、役に立ちませんでした.

context.clip（）;を動的に変更しようとしています。HTML5キャンバスで、配列からさまざまな値で図形を描画します。アイデアは、ボードゲームのさまざまな部分を次々に照らし、ボードの暗いバージョンを切り取って、よりクリアなバージョンの正方形だけを表示することです。

これは私が苦労しているコードであり、このサイトからの他の質問に基づいていますが、実際にはエラーを見つけることができません：

私はひどくコーディングしていますか？書き方を変えたり、eval（）を使わないようにしたりして、うまくいきませんでした...

いつものように、あなたの助けをありがとう！

ラモン

PD-私の英語でごめんなさい！

回転したカメラ ビデオを 2 フレーム/秒の速度で表示したいと考えています。次のコードは、240 x 320 の画像を 90 度回転して表示します。ブラウザを更新しないと画像が更新されません。変更しているソースは cam_1.jpg です。DrawImage が src イメージを取得すると、更新を探すようです。

私がまだ学んでいないことは何ですか？お時間と専門知識をお寄せいただきありがとうございます。

私はプログラミングに関して非常に初心者なので、ご容赦ください。提供する必要がある追加情報があれば指摘してください。Javascript と HTML5 キャンバスでゲームを作っています。現段階では、2 つのイメージを呼び出してオブジェクトに割り当てます。update 関数と render 関数、およびそれらのサブ関数を実行する基本的なループを使用します。

どちらも個別のレンダリング関数を介して操作されます。who の変数は update 関数によって操作され、who の変数は keyPress イベントによって操作されます。更新すると、プレーヤーの画像が表示され、正常に動作しますが、ミサイルの画像は完全にランダムに表示されます。

キーの確認:

ミサイルの更新 (update() のサブ関数):

ミサイルのレンダリング (render() のサブ関数):

編集：私は現在マルチタスクを行っているので、すべてをwww.techgoldmine.comにアップロードしました

HTML5 キャンバスと DrawImage 関数を使用して、低レートのビデオを表示しています。tnt は、このプロジェクトを軌道に乗せるための優れたアドバイスを提供しました: Canvas と DrawImage を使用して、低レートのビデオを 90 度で表示する

tnt のソリューションは、ロード時に onload 関数を使用してカメラと角度がわかっている場合は問題なく機能しましたが、複数のカメラ間でビデオをオン/オフしたり、他のパラメーターを変更したりできる必要があります。それを処理するには、いくつかの個別の関数が必要ですが、最初にカメラで setInterval を実行してから、絶えず変化する画像を DrawImage に渡すことはできませんでした。「cam_1.jpg」は、下の例のビデオです。以下の body onload に示されている関数は、実行時に他のルーチンによっても呼び出される必要があります。アドバイスをいただければ幸いです。

ありがとうございました。