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

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

Patricia Arquette
リリース: 2024-11-16 06:43:02
オリジナル
1033 人が閲覧しました
<p>Can Canvas Elements Be Used as CSS Backgrounds?

の使用CSS 背景として

<p>質問: を利用することは可能ですか?

<p> 要素を CSS の背景として使用できますか?

<p>答え: はい、 を使用できます。 CSS の背景として、現在 WebKit と Firefox の両方でサポートされています。

<p>WebKit サポート:

<div>
  <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>
</div>
ログイン後にコピー
<p>2008 年以来、WebKit では の使用が許可されています。 CSSの背景として。以下に例を示します:

<p>Firefox サポート:

<p>
ログイン後にコピー
<p>Firefox 4 では、任意の要素 (キャンバスを含む) を CSS 背景として使用できるようにする機能が導入されました:

詳細については、Mozilla ハックを参照してください。

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

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