例私は、<canvas>
を使用すると、常にHTMLに実際のキャンバス要素があることがわかります。例えば、私が描画したいと思っている要素<header>
を既に持っているとします。キャンバスとして直接使用する方法はありますか?または、キャンバス要素を追加してヘッダーを塗りつぶす必要がありますか?任意の要素をキャンバスとして使用する方法はありますか?
答えて
私は最初は懐疑的でしたが、ほぼを達成するための方法が1つあります。ウェブキットではcssとgetCSSCanvasContext()
を使用しています。これにより、キャンバスを背景として表示できるので、キャンバスのようにコントロールすることができます。
例:
HTML
<header></header>
CSS
header { background: -webkit-canvas(fooBar); }
はJavaScript(文書準備/オンロード)
function fillCanvas(w, h) {
var ctx = document.getCSSCanvasContext('2d', 'fooBar', w, h);
// draw into canvas
}
完全な例と詳細はhereです。
希望すると便利です。
興味深い選択肢のUpvoteでも、実際のキャンバス要素をCSSの下に配置するか、ヘッダー内にキャンバス要素を配置することもできます。 – markE
クロム46からこれを除去した。 '-moz-element'はまだそれに依存していないかもしれませんが、https://bugs.chromium.org/p/chromium/issues/detail?id=475655を参照してください。あなたは 'canvas.toDataURL'とcss' URL( "url");を使って背景をレンダリングされたキャンバスに設定できますが、それは遅いです。 – Blindman67
- 1. 実行時に任意の量のHTML要素を動的に生成する方法はありますか?
- 2. HTML/JavaScriptキャンバス要素用のテストスイートはありますか?
- 3. 辞書から任意の要素にアクセスするPythonic方法
- 4. WAI-ARIAリンクロールを使用して、任意の要素をハイパーリンクにすることはできますか?
- 5. キャンバスから要素を削除せずに要素を消去する方法はありますか?
- 6. jqを使用して任意のJSONを完全に並べ替える方法はありますか?
- 7. は、任意のHTML要素
- 8. xmlを任意の要素で解析する方法
- 9. フェッチされ、パラメータとして渡される要素のIDを使用して要素内の要素を見つける方法はありますか?
- 10. Angular2のdiv要素にngFormを使用する方法はありますか
- 11. GUI:TkInterを使用した任意の要素の垂直リスト
- 12. パラメータとして任意のラムダ関数を渡して使用する方法
- 13. kube-dnsに任意のレコードを追加する方法はありますか?
- 14. PHPで任意のパラメータ値を指定する方法はありますか?
- 15. Groovyを使用してリスト内のすべての要素をトリミングする方法はありますか?
- 16. 要素のouterHTMLを別の要素の内容として表示する方法はありますか?
- 17. importlibを使用して任意のソースからモジュールをインポートする方法は?
- 18. http api(または任意のV1 API)を使用してsqlを要求する方法または
- 19. appdomainを使用して、エントリdll上の任意のdllで任意のメソッドを実行する方法は?
- 20. 任意の要素をxrange()に追加しますか?
- 21. ピカソ、グライド、または任意のものを使用して、プレースホルダまたはエラードロワブルをリモートビューで使用する方法はありますか
- 22. 任意の配列要素
- 23. Javascriptを使用してクリックイベントをトリガーして要素をアクティブにする方法はありますか?
- 24. 要素内のテキストとして要素インデックス(子番号)を挿入する方法はありますか?
- 25. ボタンをクリックした後、もう1つの要素をキャンバスに追加する方法はありますか?
- 26. キャンバス要素を使ってグラフを表示する方法
- 27. QuickCheckで使用する任意のMonadicバージョンはありますか?
- 28. エンベロープスキーマからMessageBoxに任意の要素を公開する方法
- 29. 操作のためのアイデンティティ要素(0,1)を取得する任意のイディオムはありますか?
- 30. 任意の引数を持つ関数へのポインタをテンプレートパラメータとして持つ方法はありますか?
Nope。他のhtml要素にはhtml5キャンバスの機能がありません。実際のキャンバス要素をヘッダーの子として追加するだけです。 – markE