首页 > web前端 > css教程 > Canvas 可以用作 CSS 背景吗?

Canvas 可以用作 CSS 背景吗?

Linda Hamilton
发布: 2024-12-04 01:06:11
原创
787 人浏览过
<p>Can Canvas Be Used as a CSS Background?

<p>将 Canvas 嵌入 CSS 背景

<p>问题来了:canvas 元素可以用作 CSS 样式的背景吗?

<p>Webkit兼容性

<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引入了允许任何元素(包括canvas)的功能用作 CSS 背景:

<p>
登录后复制
<p>有关此功能的更多信息,请参阅 Mozilla Hacks网站。

以上是Canvas 可以用作 CSS 背景吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板