Can Canvas Elements Be Used as CSS Backgrounds?

<p>

Using as a CSS Background

<p>Question: Is it possible to utilize the element as a background in CSS?

<p>Answer: Yes, it is possible to use as a background in CSS, currently supported by both WebKit and Firefox.

<p>WebKit Support:

<p>Since 2008, WebKit has allowed the use of as a CSS background. Here's an example:

<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>Firefox Support:

<p>Firefox 4 introduced a feature that enables any element (including canvas) to be used as a CSS background:

<p>

<p>For further details, refer to Mozilla hacks.

The above is the detailed content of Can Canvas Elements Be Used as CSS Backgrounds?. For more information, please follow other related articles on the PHP Chinese website!