問題タブ [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.

11407 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
33171 参照

html - キャンバスでズーム

テストアプリケーションでは、単純な長方形が描かれたキャンバスがあります。メソッドdrawは 100ms ごとに呼び出されます。

コードからわかるように、マウスホイールを使用してすべてをスケーリングしています。今起こっていることは、すべてがスケーリングされているということですが、つまり、長方形が10px、10pxで、マウスをその上に置くと、スケーリング後に長方形がマウスの下になくなります。（すべてのユニットがスケールアップされているため、これはもちろん正しいです。

しかし、私が望むのは、マウスの位置がGoogleマップのように「ズームアクションの中心」であるため、スケーリング前にマウスの下にあるコンテンツがその後もマウスの下にあることです。翻訳をいくつか試みましたが、翻訳の仕方がわかりません。

前もって感謝します。

これが私のコードです：

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

javascript - html5キャンバス要素の変換を再利用できますか？

キャンバスコンテキストの座標空間を変換して特定の境界ボックスを含め、その周りにテストを作成していると想像してください。

次のように、コンテキストの変換を実際に「使用」することは可能でしょうか。

または、このテスト関数を作成する他の方法はありますか？

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

javascript - canvas getContext（ "2d"）はnullを返します

私はこれをいくつかの異なる方法で試しましたが、同じエラーで立ち往生し続けます。以前にキャンバスに画像を読み込んだことがありますが、数日前にSafariを更新してから、エラーが発生します。

私は今持っているものを投稿しますが、jQuery、htmlのonLoadプロパティなどを使って投稿してみました。

IDは正しく、適切なキャンバスタグとimgタグに対応しています。しかし、私は取得を続けてTypeError: 'null' is not an object (evaluating 'cvs.getContext')おり、それ以上取得していないようです。ID10Tエラーだと思いますが、これを引き起こしている原因について誰かが私に手がかりを与えてくれることを願っています。ありがとうございました。

編集：さて、これは<body onload="init()">今使用して動作するようです。ただし、表示されるのはたまにしかなく、逃げようとしinit()たり$(document).ready()、document.onload運が悪かったりすると、エラーが発生します。何かご意見は？

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

javascript - このコードでは、onload 関数を使用しましたが、まだキャンバスに画像が表示されません。

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

math - キャンバスへのスムーズなズームに関する数学の問題

そこにいるすべての数学者に、質問全体を読んでください。これは、HTML5 の知識がなくても答えられる可能性があります :-)

私は HTML5 キャンバスをズーム (スケーリング) していますが、スクーリングを「スムーズ」に見せるために、1 つの大きなステップではなく、多くの小さなステップでそれを実行したいと考えています。それを説明するには：

ユーザーがスクロールホイールを回すと、私の目標はキャンバスを合計で 20% 拡大することです。ここで、これを 20 の小さなステップに分割したいと思います。

私の問題は、キャンバスのライブラリが制限されているため、2d Context の scale(xscale,yscale) メソッドしか使用できないことです。そのため、ユニットを特定のサイズに設定することはできません。これにより、簡単になります。すべてのステップで係数を使用する必要があり、これを行う方法がわかりません。

したがって、キャンバスの単位はステップ 1 で 100 でしたが、ステップ 20 で 130 になり、その間に 19 の小さなステップがあります。

  1. oldscale: 100, : 係数: x, newscale: 101
  2. oldscale: 101, : 係数: x, newscale: 102
  3. oldscale: 102, : 係数: x, newscale: 103

……

変数 i は、現在のステップ番号 (0-19)、totalsteps (20)、およびターゲット ズーム (20) です。

それは私が必要とするものの非常に簡単な例です。主な問題は、X にしかアクセスできず、スケールに直接影響を与えることができないことです。

誰でも助けることができますか？よく説明したと思います。

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

history - HTML5 キャンバスの変更履歴

キャンバスを使用して HTML5 ベースのペイント アプリケーションを開発していますが、すべてのキャンバスの変更履歴を作成したいと考えています。ユーザーアクションの履歴を意味します。

これどうやってするの？

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

html - HTML5 画像ギャラリーのマークアップ

一部の Photoshop カンプをコードに移行する作業を行っており、小さな画像ギャラリー領域をマークアップする必要があるところまで来ました。サイドバーにあり、ページのコンテンツとは直接関係ありません。<figure>その結果、既存のコンテンツをサポートするために使用されることになっている要素を使用するべきではないと思います。

これをマークアップする方法に関する提案はありますか? 単純な順序なしリスト?

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

html - HTML5キャンバスを使用して画像にテキストを追加するにはどうすればよいですか？

HTML5を使用して画像にテキストを追加したい。これはどのように行うことができますか？

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

javascript - HTML5キャンバステキスト編集

fillText(); 編集可能にして値を変数に読み込む方法を使用して、HTML5キャンバスにテキストを入力しましたか？テキストは複雑な多角形の中に書かれるため、キャンバスの内側にある必要があります。

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

html - HTML5 Canvasで塗りつぶしと塗りつぶしの間のスペースを削除するにはどうすればよいですか？

HTMLのある塗りつぶしと別の塗りつぶしの間にある既存のスペースに悩まされています。各塗りつぶしは、傾斜した側にフィットします。正確に線を埋めることを期待していますが、スペースがあります。

これはサンプルコードです：

黒い三角形の間に白い線（空白）が表示されます。実際、三角形のポイントはFlashの自動生成プログラムによって作成され、Flashはスペースなしで三角形を表示できますが、HTML5は表示できません。誰かがその線を消す考えを持っていますか？


12345678910