タグ付けされた質問 「canvas」

私はキャンバスのデフォルトの背景色のように見えるものを黒から透明/その他の色に変更しようとしていますが、運が悪いです。 私のHTML： <canvas id="canvasColor"> 私のCSS： <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> 次のオンラインの例でわかるように、キャンバスにアニメーションを追加しているので、不透明度だけを行うことはできません。ID上。 ライブプレビュー：http : //devsgs.com/preview/test/particle/ デフォルトの黒を上書きする方法はありますか？

122 css  html  canvas  html5-canvas  three.js 

私は、ズーム可能なパン可能なグラフで基本的に何千ものポイントをレンダリングするプロジェクトを更新するために使用する適切なテクノロジーを選択しようとしています。Protovisを使用した現在の実装は、パフォーマンスが低いです。ここでそれをチェックしてください： http://www.planethunters.org/classify 完全に縮小すると約2000ポイントになります。下部のハンドルを使用して少し拡大し、ドラッグして移動します。あなたはそれがかなり途切れ途切れであり、あなたが本当に速いコンピュータを持っていない限り、あなたのCPU使用率はおそらく1つのコアで100％に上がることがわかります。フォーカスエリアへの変更ごとにprotovisへの再描画が呼び出されますが、これはかなり遅く、描画されるポイントが多いほど悪くなります。 インターフェースにいくつかの更新を加え、基礎となる視覚化テクノロジーを変更して、アニメーションとインタラクションの応答性を高めたいと思います。次の記事から、別のSVGベースのライブラリか、キャンバスベースのライブラリを選択するように見えます。 http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ Protovisから生まれたd3.jsはSVGベースであり、アニメーションのレンダリングに優れているはずです。ただし、パフォーマンスの上限がどれほど優れているかについては疑問です。そのため、KineticJSのようなキャンバスベースのライブラリを使用して、より完全なオーバーホールも検討しています。ただし、1つのアプローチを使い始める前に、これだけ多くのデータを使用して同様のWebアプリケーションを実行した人からの意見を聞き、意見を聞きたいと思います。 最も重要なのはパフォーマンスです。2番目の焦点は、他の対話機能の追加とアニメーションのプログラミングの容易さにあります。おそらく、一度に2000ポイントを超えることはなく、それぞれに小さなエラーバーがあります。ズームイン、ズームアウト、パンニングはスムーズである必要があります。最新のSVGライブラリがこれで適切な場合、おそらくd3の使いやすさはKineticJSなどの設定の増加よりも優先されます。ただし、キャンバスを使用することで、特に低速のコンピューターを使用する人にとって、パフォーマンスに大きな利点がある場合は、間違いなくその方法を好むでしょう。 NYTimesが作成した、SVGを使用しているが、順調にスムーズにアニメーション化するアプリの例：http : //www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html。そのパフォーマンスが得られ、独自のキャンバス描画コードを記述する必要がない場合は、おそらくSVGを使用します。 一部のユーザーは、キャンバスレンダリングと組み合わせたd3.js操作のハイブリッドを使用していることに気付きました。しかし、私はこれについてオンラインで多くのドキュメントを見つけることができないか、その投稿のOPに連絡することができません。このようなDOM-to-Canvas（デモ、コード）の実装を経験したことがある方は、ぜひご連絡ください。データを操作できることと、データのレンダリング方法（したがってパフォーマンス）をカスタム制御できることの良いハイブリッドのようですが、すべてをDOMにロードしなければならない場合でも、処理が遅くなるのではないかと思います。 これに似た既存の質問がいくつかあることは知っていますが、まったく同じことを尋ねる質問はありません。ご協力いただきありがとうございます。 フォローアップ：私が最終的に使用した実装はhttps://github.com/zooniverse/LightCurvesにあります

114 html  canvas  svg  d3.js  kineticjs 

私は、高さcanvas要素で働いている600の1000ピクセルとピクセル数万あるいは数百の幅。ただし、一定数のピクセル（明らかに不明）の後、キャンバスにJSで描画した形状が表示されなくなります。 制限があるかどうか誰か知っていますか？ Chrome 12とFirefox 4の両方でテスト済み。

112 javascript  html  canvas 

キャンバスで画像を開くにはどうすればよいですか？エンコードされている 私は使用しています var strDataURI = oCanvas.toDataURL(); 出力は、エンコードされたbase 64画像です。この画像をキャンバスに描画するにはどうすればよいですか？ を使用しstrDataURI て画像を作成しますか？それは可能ですか？ そうでない場合、画像をキャンバスにロードするための解決策は何でしょうか？

112 image  html  canvas  data-uri 

HTML Canvasオブジェクトをクエリして特定の場所の色を取得することはできますか？

111 javascript  html  canvas 

マウスを使用してHTMLキャンバスに描画したい（例：署名を描画する、名前を描画する...） どうすればよいですか？ソースコードを教えてください。ありがとうございました

110 html  canvas  gesture-recognition  gestures 

テキストに「\ n」が含まれていると、キャンバスにテキストを追加できないようです。つまり、改行は表示/機能しません。 ctxPaint.fillText("s ome \n \\n <br/> thing", x, y); 上記のコードは"s ome \n <br/> thing"、1行でを描画します。 これはfillTextの制限ですか、それとも間違っていますか？「\ n」はそこにあり、印刷されませんが、どちらも機能しません。

108 javascript  html  canvas  line  break 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 7年前休業。 この質問を改善する 現在、新しいHTML 5アプリケーションでキャンバスを操作するためのオプションを調査していますが、HTMLキャンバスのJavaScriptライブラリとフレームワークの現在の状態はどうなっているのでしょうか。 特に、ゲーム開発に必要なもの（複雑なアニメーション、シーングラフの管理、イベントの処理、ユーザーインタラクション）をサポートするフレームワークはありますか？ また、商用製品とオープンソース製品の両方を検討する用意があります。

107 javascript  frameworks  html  canvas 

HTMLの新しいcanvas要素を少し実験しています。 キャンバスに画像を追加したいのですが、なんらかの理由で機能しません。 私は次のコードを持っています： HTML <canvas id="viewport"></canvas> CSS canvas#viewport { border: 1px solid white; width: 900px; } JS var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; context.drawImage(base_image, 100, 100); } 画像が存在し、JavaScriptエラーは発生しません。画像が表示されないだけです。 それは私が見逃した本当にシンプルなものでなければなりません...

106 javascript  html  canvas 

しばらくの間、解決策を探していましたが、何も見つかりませんでした。たぶんそれは私の検索用語だけかもしれません。さて、私はブラウザウィンドウのサイズに合わせてキャンバスセンターを作成しようとしています。キャンバスは800x600です。また、ウィンドウが800x600未満になると、ウィンドウのサイズも変更されます（ただし、現時点ではそれほど重要ではありません）。

105 html  canvas  css  resize 

私はこの質問に答えるいくつかの異なる投稿と、stackoverflowの質問さえ見つけました。基本的には、この投稿と同じことを実装しています。 これが私の問題です。写真をアップロードするときに、残りのフォームも送信する必要があります。これが私のhtmlです： <form id="uploadImageForm" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <input id="name" value="#{name}" /> ... a few more inputs ... </form> 以前は、画像のサイズを変更する必要がなかったため、JavaScriptは次のようになりました。 window.uploadPhotos = function(url){ var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ ... handle error... …

102 javascript  html  canvas 

ノードにキャンバスモジュールをインストールする際に問題が発生します。cairoで何か問題が発生しているようです。このエラーが発生しています... npm http GET https://registry.npmjs.org/canvas npm http 304 https://registry.npmjs.org/canvas npm http GET https://registry.npmjs.org/nan npm http 304 https://registry.npmjs.org/nan > canvas@1.1.3 install /Users/plimb/Desktop/motion-therapy/node_modules/canvas > node-gyp rebuild Package cairo was not found in the pkg-config search path. Perhaps you should add the directory containing `cairo.pc' to the PKG_CONFIG_PATH environment variable No package 'cairo' …

101 node.js  canvas  terminal  cairo 

キャンバス描画タブがあり、2つの最後のマウスムーブ座標更新間の距離に基づいてlineWidthを設定します。私は自分で距離を幅に変換します。これらのポイント間の距離を取得する方法を知っている必要があります（これらのポイントの座標はすでにあります）。

100 javascript  canvas 

キャンバスにポリゴンを描画する方法を知る必要があります。jQueryなどを使用せずに。

94 javascript  css  html  canvas 

JavaScriptでキャンバス要素の幅と高さを取得するにはどうすればよいですか？ また、私が読み続けているキャンバスの「コンテキスト」は何ですか？

94 javascript  html  canvas