問題タブ [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 投票する
1 に答える
67 参照

html - HTML5 - およびオブジェクトのサブ要素

次の問題が発生しました。いくつかのテンプレートにエディターのキングを実装しています。そのエディタの主な機能は、いくつかの長方形 (いくつかのテーブルを表す) を新しい位置にドラッグして保存することです。

各長方形には名前があります。そして、テキスト名を内部に含む長方形を表示し、テキストを内部に含むその長方形をドラッグします。

このようなオブジェクト グループは、トリッキーな回避策なしで可能ですか?

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

javascript - 画像の不規則な形状を切り取る

canvas の clip() メソッドを使用して、画像を特定の形状に切り取ろうとしています。

そのために、次の手順に従いました。

  1. 長方形を描きます。
  2. 両側に半円を描きます。右と下の半円は外側に突き出ており、左と上の半円は内側に突き出ています。

コード スニペットを以下に示します。

使用している画像のサイズは 800 x 600 (png) です。ここで私が間違っていることを理解するのを手伝ってください。

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

javascript - RGB操作式

私はHTML5キャンバスAPIを試し、カラー画像から白黒画像を作成するスクリプトを作成しました。

私が使用しているRGBからグレースケールへの式は次のとおりです。r * 0.2989 + g * 0.5870 + b * 0.1140

RGB値を介して画像を操作するための式を誰かが知っているかどうか知りたいです。

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

javascript - jQuery を使用している場合、JavaScript イベントは機能しますか?

jQuery を使用してアプリケーションを作成するのは初めてですが、Javascript には精通しています。さて、私がやろうとしているのは、html5 キャンバスに画像を描画するために Javascript getElementById を使用することです。私のコードは次のとおりです。

jQuery と JQuery モバイルを含めます。

問題のあるコード:

また、使用できないことに気付きました

「onclick」のような他の Javascript イベントではありません。

私は何か間違ったことをしていますか?

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

javascript - GPU を使用してキャンバスに描画するとパフォーマンスが低下する

Chrome 12 を使用すると、ゲームがスムーズに描画されます。しかし、描画に GPU を使用しているように見える Chrome 14 は、私のゲームのパフォーマンスに多大な悪影響を及ぼします。

正確にいつ発生するかを確認するために jsFiddle を作成しましたが、この単純なコードでは既に問題が発生しています: http://jsfiddle.net/eGjak/48/

  • Chrome 12 では、FPS は 62 で、これは私の画面周波数よりもさらに高くなっています。
  • Chrome 14 では、FPS は ~25 です。

25 FPS は十分許容範囲ですが、私のゲームではさらに多くの描画を行っており、8 FPS まで低下しています。これは絶対に許容範囲ではありません。パフォーマンスの問題は一度もありませんが、キャンバスの GPU の更新がボトルネックになっています。

  • GPU を使用すると、キャンバス上の単純な描画が非常に遅くなるのはなぜですか?
  • JavaScript を介して Chrome が GPU を使用するのを無効にすることはできますか? (または、これに対する別の解決策はありますか?)

編集: http://code.google.com/p/chromium/issues/detail?id=89540でバグを報告

0 投票する
5 に答える
1951 参照

javascript - JSでの衝突検出

Tronに似た古いゲームをHTML5キャンバス+JSで再現しています。主な違いは、ヘビは直角に回転せず、曲線を描いて移動できることです(名前はAchtung Die Kurveです)。

衝突を検出する必要がありますが、方法がわかりません。ルールは本当にシンプルで、私が思いついたり読んだりすることはすべて不必要に複雑に見えます。衝突は次の場合に発生します。

  1. ヘビは別のヘビの体(またはそれ自体)に頭からぶつかります(非常に初期の実験では、ヘビが動くとすぐに、私のヘビの頭が後ろ向きに押しつぶされて自分の「首」になったためです:P)。

  2. ヘビが壁にぶつかります(内壁はありません)。

これについてはどうすればよいですか?必要なデータをオブジェクトに追加したいと思います。

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

php - divを描画し、JavascriptとHTML5を使用して多くの人と同期できるようにします

要素に落書きして、ajaxを使用してページを表示しているすべての人に共有できるWebサイトを開発しようとしています。ホワイトボードのミニチュアバージョン。私はどこから始めればよいかを知っています。私は、Html、CSS、Javascript(Jquery)、およびPHPについて十分に理解しています。私は最初の問題を抱えています。使用するすべてのテクノロジーと方法がわかりません。

0 投票する
5 に答える
2613 参照

canvas - SVG ARCTO を HTML Canvas ARCTO にマッピングする

SVG 仕様のARCTOは、 Canvasのものとはかなり異なります。SVG仕様に従ってデータを取得するユースケースがありますが、キャンバスに描画する必要があります。

これを試しましたが、ジオメトリが弱いと思います。助けていただけますか?