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

javascript - 間隔ループを使用して HTML キャンバスの色を変更するにはどうすればよいですか?

私はこれを書き、特定の色でループを開始および終了したいと考えています (たとえば、rgb 150,150,200 で開始し、rgb 190, 160, 200 で終了します):


開始色を変更するにはどうすればよいですか?

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

wpf - WPFキャンバスを水平方向に伸ばす

Canvas幅を変えて完全に水平にストレッチするにはどうすればよいですか?これは親Canvasなので、親はなく、子だけです。

XAMLソース:ブレンドで表示 http://resopollution.com/xaml.txt

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

c# - キャンバス上のUIElementの場所を決定する

2つの長方形の間に線を引く方法の例をC#で見つけようとして、20分を費やしましたが、何も見つかりません。Silverlightで2D形状を描画するパラダイムを理解していないのか、それとも間違った場所を見ているだけなのかはわかりません。

長方形をドラッグできるように設定しました。次に、キャンバス上で長方形をドラッグするときに、2つの形状の間に線を描画します。2番目の長方形をドラッグすると、次のようなことができるようになります。

最初のボックスの座標を取得するにはどうすればよいですか?アプリケーションでキャンバスを基準にした形状の座標を取得する方法がわかりません。簡単な2D形状を描く方法の初心者向けの概要を説明するチュートリアルをいただければ幸いです。

ありがとう!

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

javascript - JavaScriptで滑らかなアニメーション

javascriptで滑らかなアニメーションを描く方法はありますか? directx では、垂直同期を使用しています。HTMLキャンバスでこれを達成できますか?

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

c# - UIElement上にない場合のSilverlightのキャンバスクリックイベント

私はキャンバスオブジェクトを持っていて、その全体に素晴らしいコントロールを散りばめています。ScaleTransformオブジェクトを使用してキャンバスを拡大縮小し、ズームイン/ズームアウトできるようにしています。

コントロールをドラッグできるように配線しました。ドラッグアンドドロップは、MouseLeftButtonDown、MouseLeftButtonUp、およびMouseMoveを使用してうまく機能します。ここで、Canvasをクリックしただけでイベントを有効にする作業をしたいと思います。キャンバスオブジェクトのドキュメントを読むと、MouseLeftButtonDownイベントはUIElement上にある場合にのみ発生することがわかります。

マウスポインタがUIElement上にあるときに、マウスの左ボタンが押されたとき(または、スタイラスの先端がタブレットPCに触れたとき)に発生します。(UIElementから継承されます。)

残念ながら、私は反対の振る舞いをしたいです。マウスポンターがコントロール上にないときに、マウスがキャンバス上でクリックされたときを知りたいです。私はSilverlightを初めて使用するため、これを間違った方法で実行している可能性があります。見落としているものはありますか?私はこれを間違った方法で行っていますか?私は少しの助け、そしておそらく多くの方向性を探しています。

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

java - Java の再描画が正しく機能しない

Java repaint method を使用すると再描画されますが、キャンバスをクリックするかパネルのサイズを変更したときにのみ更新が表示されます。どうすればこれを修正できますか? 何が原因ですか?

0 投票する
7 に答える
10963 参照

javascript - Firefox が HTML Canvas putImageData で例外をスローする

だから私はこの小さな JavaScript の実験に取り組んでいて、その FPS を追跡するためのウィジェットが必要でした。Actionscript 3 で使用していたウィジェットを Javascript に移植しました。Chrome/Safari では問題なく動作しているようですが、Firefox では例外がスローされます。

これは実験です:

被写界深度

これはエラーです:

不平を言っている行は次のとおりです。

これは、ビットマップ ピクセルを「スクロール」するためのくだらないコードです。アイデアは、ビットマップの左側に数ピクセルだけを描画し、次のフレームでビットマップ全体をコピーして右側のピクセルに貼り付けるというものです。このエラーは通常、ソースよりも大きなビットマップを貼り付けていて、制限を超えているためにスローされますが、貼り付ける四角形の幅として 69 を定義しているため、理論的にはそうではありません (ビットマップ幅 70px)。

そして、これは完全なコードです:

}

何か案は?前もって感謝します。

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

html - HTML5では、プログラムでキャッシュするために画像を保存できますか?

HTML5では、テキストデータをローカルデータベースに保存でき、SQLを使用して保存できるのが気に入っています。(http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

iPhoneのMObileSafari用に作成したアプリがあり、画像を除くすべてをオフラインでキャッシュします。画像はサーバーからダウンロードする必要があり、キャッシュされたままになるようにする方法がわかりません。理想的には、それらをlocalStorageデータベースに書き込みたいと思います。

キャンバスに画像を書き込んで、それをテキストとしてシリアル化することを考えていました...何かアイデアはありますか?これを行う簡単な方法はありますか?

理想的には、ネイティブアプリ/ Objective-Cではなく、HTMLとJavaScriptを使用してこれをすべて実行したいと思います。

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

jquery - RoRまたはJQuery用の描画プラグインはありますか?

RubyonRailsを使用してWebベースのアプリケーションを作成しています。フォームの1つでは、ユーザーはマウスで何かを描画し、オブジェクトにテキストでラベルを付ける必要があります。要するに、私は必要です

  1. マウスで描くことができるアプリケーションのようなシンプルなペイント。
  2. 簡単なテキストを書いてください。
  3. ペイントした図は、後で編集できるようにファイルとして保存します。
  4. 痛みを伴う図をgif/jpeg画像としてエクスポートします。

例はhttp://charles-harvey.co.uk/examples/paint/にあります。これが私の質問です:

  1. ペイントのようなオブジェクトをフォームに追加できるRoRプラグインはありますか?
  2. そうでない場合は、レールに含めることができるアプリケーションのような単純なペイントを備えたJQueryプラグインはありますか?
  3. これ以上のポインタはありますか?

簡単なキャンバスアプリケーションを作成することはできますが、締め切りが非常に厳しく、すでにテスト済みのものを使用することを好みます。

PS:そのようなアプリケーションへのリンクを見つけましたが、ブックマークするのを忘れていました。

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

silverlight - Silverlight 3 - キャンバスをズームインする ScaleTransform またはその他の方法?

マウスホイールを使用してキャンバスをズームインおよびズームアウトできるようにする必要があります。マウス ホイール ハンドラーを正常にセットアップし、現在 ScaleTransform を使用してズームを適用しています。ただし、スケーリングは「直感的な」方法では行われません。

MultiScaleImage、Google Maps/Earth、または Adob​​e Acrobat Reader で見られるのと同じスタイルの「ズーム」を実現しようとしていますが、画像ではなく、コントロールを使用しています。トランジションは「スムーズ」またはアニメーション化する必要はありませんが (より簡単な方法でない限り)、機能は同じである必要があります。

どんな考えやアイデアも高く評価され、事前に感謝します!

編集:アニメーションを使用してズームを「スムーズ」にすることができました:

次のコードを使用します。

ただし、ズームがマウスの「周り」にある Google マップなどのサイトとは対照的に、左上隅からズームアウトしているという問題は依然として発生します。