問題タブ [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 に答える
4402 参照

javascript - キャンバスで変換された座標を取得する

translateキャンバス上で/のような変換関数を使用するrotateと、任意のキャンバス関数に渡されるときにすべてのポイントが変換されます。これは魅力のように機能しますが、実際に描画せずに変換されたポイントを簡単に取得する方法もありますか?

これは、デバッグ時に非常に役立ちます。今できることは、ポイントがどこで終わるかを調べることだけですが、計算された変換された座標を取得できないようです。

それで、私が90度回転すると、点を取り(つまり(10, 0))、変換された点を戻す(つまり(0, 10))関数はありますか?

私は基本的にこのようなものを意味します:

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

html5-canvas - パスを反転すると、塗りつぶしの結果が異なるのはなぜですか?

以下が正方形が互いに重なる白いフィールドを生成するのはなぜだろうと思っていました:

http://jsfiddle.net/yNTTj/5/

したがって、最初の正方形は時計回りに定義されたパスで描画されますが、2 番目の正方形は反時計回りに定義されたパスで描画されます。

正方形 2 の次数を同じ方法で定義するとどうなるかのように、両方が黒く着色されると思います: http://jsfiddle.net/yNTTj/6/。しかし、見かけ上、重なり合うスペースは白(一般的に言えば、背景色)になります。

逆にパスを定義すると、基本的に同じ領域が切り捨てられるのに、塗りつぶすときに異なる結果が得られるのはなぜですか?

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

javascript - 3Dポイントを2Dポイントに投影すると、物事が反転します

カメラの後ろにあるものはすべて裏返しになっているようです。 現在のスクリーンショット

これは元のモデルです: オリジナルモデル

つまり、カメラは「フレーム」の右側の開口部にあります。

これが深さの計算です(問題はここにあると思います):

誰かがこの問題を知っていますか?

編集:私はここに答えがあります:

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

jquery - ユーザーがボタンをクリックするたびに複数の画像が必要です-それはjqueryである必要があります

ボタンをクリックしたときに複数の円の画像を取得する必要があります。私はそれを単一の画像で行いましたが、それもドラッグ可能な画像です。

しかし、ユーザーがボタンをクリックするたびに複数の画像が必要です。

追加機能でそれを行いましょうか。その中でキャンバスタグを使用しています。もしそうなら、どうすればそれを実装できますか。

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

javascript - HTML5 Canvas の置き換え先

HTML5 Canvas を simple に置き換えようと<div> していますが、この行を置き換える方法がわかりません:

多分誰かがこれをに置き換える方法を知ってい<div>ますか?

例: http://jsfiddle.net/HDpMW/5/ (このコードは glacialflame.com から)

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

colors - HTML キャンバスのアルファ ピクセルが背景色に溶け込まないのはなぜですか?

http://jsfiddle.net/jBgqW/

背景をペイントしてfillRectfillStyle設定しましrgb(255,0,0)たが、ピクセルを反復処理してランダムな色とアルファピクセルの値を設定すると、0すべてが白になります。ピクセルが透明な場合、以前にペイントされた背景色とブレンドするか、常にデフォルトで白にする必要があると想定しました。

キャンバスの使い方が間違っていることを願っています。

この場合、背景が赤ではない理由と、アルファピクセルを適切に使用する方法を誰かが説明できますか? これがアルファ事前乗算と関係があるかどうかを知りたいです。

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

html5-canvas - キャンバスの「反対」の形を埋める方法は?

HTML5キャンバスに円(円弧)があるとします。私はこのようにそれを埋めることができます:

それは御馳走を動作します。しかし、どうすれば反対の領域を埋めることができますか?これで白に黒の円が表示されますが、次の画像(白が背景色、黒が塗りつぶし色)の線に沿って配置したいと思います。

反対側のエリア

黒の背景を使って白い円を描くこともできますが、背景は何でもかまいません(以前はいろいろなものが描かれていたので、色を入れ替えるだけではいけません)。

もう1つは、キャンバス全体を塗りつぶすのではなく、円のある正方形をキャンセルする必要があるということです。

私は考えてglobalCompositeOperationいましたが、どれも私が必要とするものに従って行動しないので、それは私のニーズに合わないようです。

では、例の画像のように「反対側」の領域を埋めるにはどうすればよいでしょうか。

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

javascript - HTML5キャンバス上の画像グラデーション

画像に放射状のグラデーション効果を取得したいと思います(alpha = 1中央で、エッジが透明です)。

どうすればそれができるかについてのアイデアはありますか?

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

html - HTML5でcanvasを使用してテキストを書く

次のコードを使用して、canvasを使用してテキストを記述しました。

私の質問は:他の言語でもテキストを書くことは可能ですか?

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

python - つかむSelenium / Pythonによるピクセル

サーバー側でいくつかの自動化を行っています。Python コードを介して何らかの方法で HTML ページと対話し、ピクセル データにアクセスしたいと考えています。Selenium は彼のアプローチに対してどのようなオプションを提供していますか?

考えられる考慮事項

  • インプロセス メモリ内の生のピクセル データへのアクセス

  • ピクセルをローカルの画像ファイル (PNG) に保存して取得する

  • ピクセルをメモリに保存し、localhost のポートをリッスンし、AJAX 経由でデータをプッシュしてピクセルを取得します。

  • イメージ ファイルを作成し、インプロセス メモリに直接アクセスする