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

php - Canvas を使用してレーダープロットの矢印を回転させる

Canvas でコーディングされたレーダー/スパイダー プロットに矢じりを追加しようとしています。PHP/SQL を使用していくつかのデータベース値を取得するため、キャンバスにプロットするために必要な JS のほとんどをエコーし​​ます。これまでのところ、軸 (7) とガイドライン (5 つの値) を描画しました。

矢印が正しく表示されるように矢印を回転させるにはどうすればよいですか。角度と 7 軸の端に?

0 投票する
3 に答える
5589 参照

javascript - iPhoneでphonegapでエンコードされた画像(Base64)を表示できません

PhoneGap を使用して iPhone 用のアプリケーションを開発しており、JavaScript でコーディングしています。私がしていることは、Web から画像をダウンロードし、それを Base64 にエンコードして、以下を使用してデータベースに保存することです。

保存された画像は次の形式です。

ここで、ユーザーがオフラインのときに、データベースから画像を取得して HTML5 キャンバス アイテムに表示する必要があります。そのための次のコードがあります。

しかし、srcがデータベースから取得した正確なbase64エンコーディングであることを確認しても、空のキャンバスが表示されます。デコードしてから画像を表示するなど、最初に何か他のことをする必要がありますか? はいの場合、どのように実装しますか?

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

javascript - HTMLキャンバス上のポイントのスケーリング

amxn Canvasで描画されたポイントのセットをスケーリングしてから、apxqキャンバスで同等のポイントのセットを再描画する方法はありますか?ここで、p<mおよびq<nですか?座標をスケーリングする方法はオプションであるべきだと知っていますが、これを行うための他の方法はありますか?

前もって感謝します

0 投票する
3 に答える
1114 参照

javascript - キャンバスに描かれたpng画像を消去する

私はiPad用のhtml5アプリに取り組んでいます。キャンバス要素に画像を表示し、その下に背景画像を表示したいと思います。ユーザーがキャンバス内の画像を指で拭くと、背景画像が表示されるように消去されます。これが私が始めているコードです。現在、背景画像を表示するために透明な線を描画しようとしています。タッチイベントについては後で心配します。何か案は?

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

javascript - HTML5Canvasの描画と更新

タイトルが曖昧で申し訳ありませんが、私が尋ねようとしていることを要約する方法が完全にはわかりません。

まず、これが私がこれまでに持っているもののjsFiddleです。

HTML5キャンバス要素の使い方とjsOOPの使い方を学び始めたところです。

フィドルからわかるように、長方形のクラスを作成し(冗長かもしれませんが、できるだけ多くの正方形を作成できるように)、それを参照して描画します。ただし、を設定するheight = widthと、常に非正方形になります。私はキャンバスを使用するのは比較的新しいですが、正方形の高さと幅はキャンバス要素のサイズに比例しているため、キャンバス要素の高さと幅は比例してはならないためだと思います(割り当てられたパーセント値ではなく明確なピクセルに)。

正方形のサイズをピクセルに設定することでこれを修正できますが、キープレスイベントが呼び出されたときに、正方形がまったく移動しません。

また、ユーザーが矢印キーで正方形を移動できるように、keypressイベントがあります。ただし、コードでフリップフロップを使用しても、上下のキーの値が反転しているように見えますか?そして、左/右のキーは何もしませんか?

そして、私も正方形を上下に動かすことができるのは一度だけですか?ユーザーが対応するボタンを押し続ける限り、私のコードでx / y値を増やすことはできませんか?

誰かがこれをチェックして、私が間違っていることについていくつかの指針を私に与えることができれば、それは素晴らしいことです!私はこれを使ってたくさんの新しいことを試みています。それは単なる学習体験なので、もしあなたがそんなに傾いていると感じたら、私が学ぶのを手伝ってください!

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

html - OpenGL キャンバス座標を HTML5 キャンバス座標に変換する

Java アプレットの OpenGL シミュレーションがあり、HTML5 キャンバスに変換しようとしています。これらの座標を変換する方法を知っている人はいますか?

OpenGL は -400x から +400x まで、-600y から +600y まで取得できますが、キャンバスは 0x から 400x まで、0y から 600y まで負の座標なしで取得できます。

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

html5-canvas - キャンバスからの画像化

キャンバスからデータを取得し、img 要素の src 属性を設定しようとしています。ここでの問題は、キャンバスの背景画像がキャンバス メソッドではなく css で設定されていることです。toDataURL メソッドがそれをキャッチできるように、背景画像を抽出する方法または方法はありますか?

ありがとう

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

html - HTML5キャンバス上のサブパスの開始点と終了点を変更することは可能ですか?

HTML5キャンバスについて質問があります。

HTML5キャンバス上のサブパスの開始点と終了点を変更することは可能ですか?つまり、ドラッグアンドドロップで既に描いた形を変えたいのです。

ヒントを事前に感謝します!

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

html - スムージング Html5 キャンバスでの自由な描画

HTML5キャンバスで自由描画を実装しています。現在、すべてが正常に機能しています。すべてのマウスムーブに moveTo() と lineTo() を使用しています。図面を微調整する必要があります。

急激な動きで曲線のような線を描くと、直線の継ぎ目のように描画されます。描画をよりスムーズにするための別の描画方法はありますか?

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

javascript - HTML5 Canvasの「ペイント」メソッド?

キャンバスに描かれたものが特定の時点まで見られないようにする方法はありますか?一度に複数のオブジェクトを描画してから、ループ上で別のオブジェクトと別の複合メソッドを使用してそれらを描画できるようにしたいと思います。

ペイントの最初のロットは非常に時間がかかるため、結果はループする前にほんの一瞬しか表示されません。