ホームページ > ウェブフロントエンド > CSSチュートリアル > Canvas を CSS 背景として使用できますか?

Canvas を CSS 背景として使用できますか?

Linda Hamilton
リリース: 2024-12-04 01:06:11
オリジナル
787 人が閲覧しました
<p>Can Canvas Be Used as a CSS Background?

<p>CSS 背景へのキャンバスの埋め込み

<p>疑問が生じます: Canvas 要素は CSS スタイルの背景として利用できますか?

<p>ウェブキット互換性

<p>2008 年以来、WebKit はこの機能をサポートしています。 Canvas 要素を背景として使用するには、次のコードを使用します。

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>
ログイン後にコピー
<p>Firefox の実装

<p>Firefox 4 では、任意の要素 (キャンバスを含む) を許可する機能が導入されました。 CSS 背景として使用するには:

<p>
ログイン後にコピー
<p>この機能の詳細については、を参照してください。 Mozilla Hacks Web サイト。

以上がCanvas を CSS 背景として使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート