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

javascript - キャンバスタグに矢印を描く

キャンバスタグのjavascriptを使って矢印を描きたいです。二次関数を使って作ったのですが、矢印の回転角度を計算するのに苦労しています...

誰でもこれについて手がかりを持っていますか?

ありがとうございました

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

html - 3D球を描く方法は?

HTML5.0キャンバスで3Dボールまたは球を描きたい。3D球の描画方法についてアルゴリズムを理解したい。誰がこれを私と共有できますか?

0 投票する
17 に答える
614607 参照

javascript - ウィンドウに合わせて HTML5 キャンバスのサイズを変更する

<canvas>ページに合わせて HTML5 要素を自動的にスケーリングするにはどうすればよいですか?

たとえば、とプロパティを 100% に<div>設定することで をスケーリングできますが、はスケーリングしませんか?heightwidth<canvas>

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

javascript - Webワーカーとキャンバス

Webワーカーはキャンバスオブジェクトにアクセスできますか?

0 投票する
25 に答える
1075980 参照

javascript - 再描画のためにキャンバスをクリアする方法

合成操作を試し、キャンバスに画像を描画した後、画像を削除して合成しようとしています。どうすればよいですか?

他の画像を再描画するには、キャンバスをクリアする必要があります。これはしばらく続く可能性があるので、毎回新しい長方形を描くことが最も効率的なオプションになるとは思いません。

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

javascript - HTML5キャンバスとは何ですか?

HTML5キャンバスが何であるか少し混乱しています。JavaScriptだと言われましたが、もっと大したことのようですか?

  1. javascriptと何が違うのですか?

  2. なんでこんなにすごいの?

  3. JavaScript以外のことをしますか?

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

html - HTML5キャンバスを保存するには?

現在、 Canvas2Imageを使用して HTML5 キャンバスのコンテンツを保存しています。ただし、Google Chrome では動作しないようです。この問題を回避する方法についてのアイデアは大歓迎です。:)

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

java - Android Canvas での複合操作

私は Android 開発を始めたばかりで、JavaScript/HTML の世界から来たので、現在 Android SDK の可能性を調査しています。

HTML 5 キャンバスは複合操作をサポートしています (こちらを参照)

これは Android Canvas で可能ですか? Canvas クラスの API をスキャンしましたが、有用なものが見つかりませんでした。少なくとも「source-in」または(これが不可能な場合は)「source-atop」という複合操作が必要です。

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

javascript - HTML5 Canvas: globalCompositeOperation="darker" を偽装する方法

私はこれについてグーグルで検索しましたが、StackOverflow を含め、「ほとんどの主要なブラウザーでサポートが壊れていた」ということしか見つかりませんでした。私の問題に対する実際の解決策ではありません。

今月のプレイボーイには、目を見張るような中折りを見るための 3D メガネ (赤/シアン) が付属していました。当然のことながら、私はインターネットにアクセスして、可能な限りすべての赤/シアンのアナグリフを見つけ、それらがどれほど素晴らしいかを調べました。最終的に、いくつかのアニメーション GIF を見つけたので、3D シーンに形状を配置できるクールな HTML5 Canvas を作成する必要があるのではないかと考えました。

これが私が得た距離です。 Google Chrome でのみ正常に動作します。Firefox では、"Elevated Text" は正しく表示されますが、四角形は正しく表示されません。

シーンを生成する方法は次のとおりです。それぞれ Z インデックスを含むレイヤーがあり、必要なレイヤーに四角形またはテキストを配置できます。コンセプトはシンプルです。オブジェクトを描画するとき、純粋な赤で左に 1 [Z-index] ピクセルを描画し、次に純粋なシアンで右に 1 [Z-index] ピクセルを描画します。

理論的には、重なっている部分を差し引いて純粋な黒にする必要があります。Chrome では、これは四角形の塗りつぶし、テキストのストロークで発生しますが、テキストの塗りつぶしでは発生しません。Firefox では、これはテキストをストロークする場合にのみ発生します。

の意図した効果globalCompositeOperation="darker"はまさに私が望んでいることですが、この道をたどると苦痛しかもたらさないことは明らかです。

を使用せずに必要な効果を得る方法について、ここに誰か考えがありますglobalCompositeOperationか? 色のアルファ チャネルをいじってみましたが、それがどのように組み合わされるかはあまり好きではありませんでした (純粋な黒になることはありません)。赤とシアンの四角形の間に 3 つ目の黒の四角形を描画できますが、テキストや任意の形状の問題は解決しません。

Javascript でピクセルごとのレンダリングを自分で行うこともできますが、それはやり過ぎのように思えます。何かご意見は?

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

html - 奇妙なHTML5キャンバスのdrawImageの動作

HTML5キャンバスを使用するコードを書いています。一般的にはうまく機能しますが、今では非常に奇妙な動作を見つけました。奇妙なことは、それが異なるブラウザで一貫しているということです、それで私が間違ったことを理解したということであるに違いありません...ドキュメントにもかかわらず私がしていることを正確に言っているようです。コードは次のとおりです(これはオブジェクトメソッドです)。

この後、jQueryを再度使用して、この要素をすでにページにある(空白の)Divに追加します。その結果、画像は幅の10倍のように引き伸ばされます。これは奇妙なことです。なぜなら、drawImageについて私が理解したことでは、画像を拡大縮小するためにwとhの値を使用する必要があり、wとhがキャンバスのサイズ、それはうまくフィットする必要があります。

私は何が間違っているのですか?レンダリングされたDOMツリーから描画を行うためですか?