問題タブ [html5-canvas]

シンプルな HTML ファイルをキャンバスに読み込もうとしました (browser = ff 3.66)。

どうすればこの問題を回避できますか?

次のイベント管理をキーコードからマウスに置き換えたいと思います。どうすればそれを行うことができますか？

現在対応しているブラウザ＝FF 3.6x。

canvas.toDataURL()Adobe AIRで使えますか？

試してみると、次のエラーが表示されます。

エラー: SECURITY_ERR: DOM 例外 18

HTML5 キャンバス オブジェクトを使用して単純な 3D エンジンを作成しています。うまく機能していますが、赤/青のメガネを使用して 3D を実際に見ることができるように、赤/青のアナグリフ処理を実装したいと考えています。現時点では、3D オブジェクトを 2 回レンダリングしています。2 回目は、最初のカメラ位置のすぐ隣のカメラ位置からです。

私が直面している問題は、レンダリングされた 2 つのオブジェクトを組み合わせて、アナグリフの正しい色にする方法です。現在、globalAlpha=0.5 を使用して、最初を赤で、2 番目を青でレンダリングしています。ただし、赤のオブジェクトの影響を受けるピクセルのみが赤のままであるため、これは完全には機能していませんが、背景色が黒であるため、黒と赤の間の色になっています。

3D アナグリフ作成アプリケーションを見ていると、赤と青のピクセルが一緒に次のように計算されることに気付きました。

ただし、HTML5 キャンバスはアルファを使用してすべてのピクセルを計算しているため、背景色が黒の場合、赤のままのはずの赤のピクセルが濃い赤になります。基本的に、赤のオブジェクトのピクセルは各ピクセルの赤の成分にのみ影響し、青のオブジェクトのピクセルは各ピクセルの青の成分にのみ影響する必要があります。

ピクセルごとに作業することもできますが、これは可能であり、パフォーマンスを損なうことはありませんか? 1秒間に20フレームをレンダリングしているので、実用的ではないと思います。任意の提案をいただければ幸いです。

この画像で全体が明確になることを願っています。

キャンバス上で最初の画像アニメーションを作成しようとしています。画像を回転させたいのですが、コードに問題があります。何か案は？これはすべてjqueryドキュメントの準備ができています：

私が取り組んでいる 3D エンジンでは、3D で立方体をうまく描画できました。私に関する限り、側面を塗りつぶす唯一の方法は、単色またはグラデーションのいずれかを使用することです。もっとエキサイティングにするために、単純なビットマップを使用してテクスチャ マッピングを実装したいと思っています。

要点は、JavaScript での画像操作に関する記事やコード サンプルがほとんど見つからないことです。さらに、HTML5 キャンバスでの画像のサポートはトリミングに限定されているようです。

長方形のビットマップが不規則な立方体の面を埋めることができるように、ビットマップを引き伸ばすにはどうすればよいですか? 2D では、投影された正方形立方体の面は遠近法により正方形ではないため、四角形に収まるように伸ばす必要があります。

うまくいけば、この画像が私の主張を明確にします。左面が白/黒のグラデーションで塗りつぶされました。テクスチャ マッピングされた後、ビットマップで塗りつぶすにはどうすればよいですか?

JavaScript と HTML5 Canvas を使用したパースペクティブ テクスチャ マッピング (または画像操作) に関するヒントはありますか?

編集: 6502 のおかげでうまくいきました!

ただし、かなり CPU を集中的に使用するため、最適化のアイデアをぜひお聞かせください。

6502 の手法を使用した結果-テクスチャ画像を使用

序章

私は現在、MugTugのSketchpadに似た小さな描画アプリケーションを開発しています。しかし、私がまだ回避できていないかなり厄介な問題が1つあります。

描画アルゴリズム

私の基本的な描画アルゴリズムは、MugTugで使用されているものと似ています。基本的には、ユーザーが描画しているときにdrawImageを使用して画像にスタンプを付けるだけです。深刻なハンディキャップが1つあります。アルゴリズムは低いアルファで失敗し始めます。

これは、MugTugのツールで、次の方法でブラシ設定を設定することで簡単に確認できます：直径-> 100、硬度-> 1、フロー-> 100、不透明度-> 2（1は小さすぎます！アプリのバグ？）。

2つの主要な問題があります：1。目に見えるバンディング。2.色の変化（これがどのように機能するかを確認するために、さまざまな色を試してみてください...）

質問

この問題は色の精度と関係がありますか？Canvas APIは、8ビットチャネル（つまり、0〜255）を使用して色を処理しているように見えます。この制限を回避する方法はありますか？可能であれば、代わりに純粋なフロートカラー（0.0-1.0）を使用したいと思います。

これに対処する方法についてのアイデアは大歓迎です。色が実際に8ビットチャネルに制限されている場合、私は運が悪いと思います...

Raphael JavaScriptライブラリを使用しているときに、紙/キャンバスの絶対位置を見つけるにはどうすればよいですか？

たとえば、最小限の作業例を次のようにするとします。

紙が存在するdivのIDを知らなくても、ページの上部から紙の絶対x座標とy座標を見つけるにはどうすればよいですか？（例では、それを知ることができますが、実際の状況では、div IDを知ることははるかに複雑になります。）

私は現在、スマッジツールとブラーツールのピクセルデータにアクセスする必要がある小さな描画アプリケーションを作成しており、FirefoxのHTML5CanvasAPIで厄介な問題にぶつかりました。どうやらそれは仕様で定義されているようにgetImageDataを完全に実装していません。仕様には、「...キャンバスの外側のピクセルは透明な黒として返される必要があります...」と具体的に記載されています。

これはFFでは発生しません（FF 3.6および4ベータ9でテスト済み）。代わりに、次のようなエラーが発生します：無効または不正な文字列が指定されました "コード：" 12

これはChromeで問題なく機能するように見えることに注意してください。

これは、この制限を回避するためにいくつかの追加コードを実装する必要があることを意味すると思います。次のコードを使用して、問題を回避することができました。

空のピクセルの束を発信者に返すので、これはクールではありません。仕様と同じように結果を返す方がはるかに良いでしょう。

コードを明確にするために、実際のコンテキストをラップし、いくつかの追加機能（相対座標など）を提供するコンテキストAPIの一部です。これはおそらく、this.widthなどがどこから来ているのかを説明しています。

面倒なのはXXXの部分です。仕様に合ったImageDataを返す方法が必要です。これを行う方法についてのアイデアは大歓迎です。:)

私の以前の質問に関して、私はChromiumのサポートを試しましたwebkitRequestAnimationFrame。setIntervalそれにはたくさんの利点がありますが、私にとっては、プレーン/setTimeoutアニメーションの生成に使用するよりもはるかに悪いことがわかりました。

http://paulirish.com/2011/requestanimationframe-for-smart-animating/に記載されている例を、 ：webkitRequestAnimationFrameと一緒に試してみました。setTimeout

1. webkitRequestAnimationFrame： http： //jsfiddle.net/hnQYt/
2. setTimeout： http： //jsfiddle.net/hnQYt/2/

最初の方法の滑らかさに問題があるのは私だけですか？そうでなければ、なぜこの特別に設計された方法が惨めに失敗するのでしょうか？