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

図面を含むcanvas要素があり、クリックすると画像をpngファイルとして保存するボタンを作成したいと思います。したがって、保存、開く、閉じるダイアログボックスが開くはずです... 私はこのコードを使用してそれを行います var canvas = document.getElementById("myCanvas"); window.open(canvas.toDataURL("image/png")); しかし、IE9でテストすると、「Webページを表示できません」という新しいウィンドウが開き、そのURLは次のようになります。 data：image / png; base64、iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / BoeI / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + H + TX / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 …

80 javascript  html  canvas 

問題 特定のポイントについて、特定の半径の円内にあるすべてのピクセルを取得したいのですが、ポイントは整数座標しか持てません。つまり、キャンバス内のピクセルです。 だから私は、与えられた黄色の領域内のすべてのポイントを取得したい(x, y)とr。 アプローチ 私が考えることができる最も効率的な方法は、正方形をループして各ポイントのユークリッド距離を(x, y)確認することです。 for (int px = x - r; px <= x + r; px++) { for (int py = y - r; py <= y + r; py++) { int dx = x - px, dy = y - py; if (dx * dx …

8 c++  algorithm  canvas  geometry  distance 

マウスが画像の上にあるとき。これは、ifステートメントによって検出されます。 if ((distance(circles[this.index].x, circles[this.index].y, mouse.x, mouse.y)) < circles[this.index].radius) また、画像の外でマウスを検出したいと思います。その前のifステートメントの後、他に使用できない理由は次のとおりです。 画面上に複数の画像を生成したとき、および1つの画像の上にマウスを置いたときにマウスを使用したとき。それはその画像のホバーを行い、コードはそれを検出しますが、他のすべての画像のホバーも行いません。それが「外円」を4回、「内円」を1回表示する理由です ログに見られるように： Console.logの出力： Mouse inside circle Mouse outside circle 4 Mouse inside circle Mouse outside circle 4 マウスが円を離れるときに検出する方法を探しています。 以下で私が作業しているコードを見つけることができます： PS：マウスがどの（インデックス）サークルで検出され、そこから去るかが重要です。大量の写真を作成したいのですが、以下のコードではデモ用に5を使用しました。 var mouse = { x: innerWidth / 2, y: innerHeight / 2 }; // Mouse Event Listeners addEventListener('mousemove', event => { …

8 javascript  html  canvas 

理論的な問題について少し述べたいと思います。 私が無限のスクロールを持っていて、ここで説明されているようなものを実装したとします：https : //medium.com/frontend-journeys/how-virtual-infinite-scrolling-works-239f7ee5aa58。特別なことは何もありません。それは、データのテーブル、たとえばNxNであると言えば十分です。ユーザーは、スプレッドシートのように、右下にスクロールでき、現在のビューとマイナスのデータのみを表示します。扱う。 ここで、次のような関数を使用して、そのビューでデータを「フェッチして表示」するのに約10ミリ秒かかるとしましょう。 get_data(start_col, end_col, start_row, end_row); これは、スクロールバーのどこかをクリックするか、必要なデータをレンダリングするために「わずかにスクロール」するときに即座に読み込まれます。ただし、すべての「未完了のフェッチイベント」について、必要なビューデータのレンダリングに2倍の時間がかかると仮定します（メモリ、GC、その他いくつかの理由により）。したがって、ゆっくりと意図的に左から右にスクロールすると、データのロードをトリガーする100以上のスクロールイベントが生成される可能性があります-最初は著しく遅延はありません。フェッチは10ミリ秒未満で発生しますが、すぐに20ミリ秒、次に40ミリ秒かかり、必要なデータをロードするために1秒以上かかるまで、かなりの遅延が発生します。さらに、デバウンス/遅延のようなものは使用できません。 どのような考慮事項を考慮に入れる必要があり、これを実現するためのサンプルアルゴリズムはどのように見えますか？これは、10000 x 10000のスプレッドシート（​​Excelはすべてのデータを一度に読み込むことができます）を想定した、データに対するユーザー操作の例です-https://gyazo.com/0772f941f43f9d14f884b7afeac9f414。

8 javascript  algorithm  performance  canvas  virtualscroll