問題タブ [html5-canvas]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
8742 参照

javascript - Interacting with Canvas Rectangle

I have a canvas Element in my simple HTML page and it has few rectangles drawn using context.fillRect() method. I need to interact with these drawn rectangles.

How can I do so? How can I bind onclick or onmouseover with these rectangles?

0 投票する
1 に答える
982 参照

javascript - HTMLキャンバスでストロークをパスに変換する

画面に描画されずに新しいパスに変換されるようにパスをストロークできますか?もしそうなら、どのように?

0 投票する
2 に答える
2616 参照

colors - 3D アナグリフ画像の色

3D アナグリフ画像 (赤/シアン色) を作成する方法を探っています。HTML5<canvas>要素を使用して描画を行っています。

問題は、どの色を正確に使用する必要があるかがわからないことです。また、色をどのように組み合わせるかについてはよくわかりません。

現在、次のコードがあります: http://jsfiddle.net/eGjak/15/。問題は、赤い部分に正しい色を使用できないことです。どれだけ赤を選んでも、私のメガネはまだ赤をメガネの赤い部分に通しています。ただし、シアンはメガネのシアン部分を通過しません。背景色にも依存しているようです-誰かがこれに光を当てることができますか?

次に、赤とシアンをどのように組み合わせる必要がありますか? 現在、色を合計していますが、赤が(255,0,0)でシアンが であるため、結果は白になり(0,255,255)ます。サンプル画像では、足し合わせると黒くなるように見えますが、どうしてそれが可能なのでしょうか?

では、赤い部分は何色にしようかな?そして、赤とシアンの部分が重なっている部分をどのように組み合わせるのですか?

0 投票する
1 に答える
532 参照

javascript - HTML5 Canvas は canvas.toDataURI() から受信したデータをレンダリングしません

HTML5 Canvas があります。それを .toDataURI にして、AJAX で PHP に送信します。PHPはそれをデータベースに保存します。

次に、データベースからそのデータを要求してレンダリングするための img 要素を持つ別のページがあります。しかし、そうはなりません。データが通過しています。ブラウザのソース表示機能で確認できます。

(省略記号を追加)

切り捨てられたり、そのような愚かなことはありません。データがキャンバスによって生成された場所から最終要素に埋め込まれた場所まで、すべてのスクリプトに document.write と echo があり、完全にそのまま通過しています。

他のソースによって生成された画像 URI で試しましたが、問題はありません。Chrome 12 と Firefox 5 でこれをテストしましたが、動作は両方で同じでした。

最後の奇妙な点は、キャンバスが完全に空白の場合、キャンバスが生成する画像データが表示されることです。元のキャンバスと同じ寸法の空白の画像が表示されます。しかし、何かを描くとすぐに、何もありません。おなじみの小さなエラー読み込み画像アイコンです。

これは受信側の私のコードです:

http://pastebin.com/Hw1ykd1i

そして、送信側の場合:

http://pastebin.com/hwsEfsaD

0 投票する
14 に答える
114308 参照

javascript - htmlによるデータグラフ化

数秒ごとに更新され、ページを更新する必要のない折れ線グラフが目標になります (サーバー上で更新される別のファイルから情報を取得します)。これを簡単にする JavaScript ライブラリ (JQuery 以外) はありますか? 誰かがウェブページで例を示すことができますか?

データは一定間隔で更新されます。可能であれば、CSS HTML5 と JavaScript のみを使用することをお勧めします。

0 投票する
4 に答える
665 参照

javascript - JavaScript と Canvas によるアニメーション

canvas で簡単なアニメーションを作成できます。しかし、ペイントする前にすべてのフレームをきれいにする必要があり、ペイントが遅くなります (fps ~ 15) 2 つのキャンバスを使用しようとしましたが、成功しません。fpsを上げる方法を知っていますか?バッファリングを使用できますか? そしてどうやって?

0 投票する
1 に答える
10043 参照

html - HTML5キャンバスでテキストを揃えるにはどうすればよいですか?

html5 キャンバス内のテキストを揃えて配置するにはどうすればよいですか? 以下のコードでは、テキストを左/右/中央に揃えることがalign="justify"できます。設定する必要があります。

HTML:

JS:

0 投票する
1 に答える
122 参照

html - パッケージ化された Chrome Web App で使用するファイルを参照します

(パッケージ化された) Chrome Web App のファイルシステムからユーザーが選択したファイルにアクセスするにはどうすればよいですか?

<canvas>画像操作アプリを作成していますが、選択したファイルの内容を要素に描画する必要があります。

これは可能ですか?

0 投票する
2 に答える
495 参照

javascript - Chromeでテキストの落とし穴を描く

3つのキャンバスA、B、Cがあります。

Aコントロールキャンバスです。スケーリングは方向と方向にB変換さBれますが、Firefoxではスケーリングは方向にのみ変換されます。どの実装が正しいですか?xyx

また、回転していることに注意してCください。Chromeでは完全に見苦しいように見えますが、Firefoxではこれで問題ありません。これを修正するにはどうすればよいですか?

私は最新のChromeとFirefox5を持っています。

コード

実用的な例はここにあります