使用 <canvas>作为 CSS 背景 [英] Use <canvas> as a CSS background

查看：25 发布时间：2021/12/21 8:11:04 javascript css canvas

本文介绍了使用 <canvas>作为 CSS 背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以使用 canvas 元素作为 css 背景吗?

解决方案

WebKit 自 2008 年起就可以实现这一点，参见这里.

<头><风格>div { 背景:-webkit-canvas(squares);宽度:600px；高度:600px；边框:2px 纯黑色 }</风格><script type="application/x-javascript">函数绘制(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);}<body onload="draw(300, 300)"><div></div>

目前，Firefox 4 包含一项功能，允许您以这种方式使用任何元素(包括画布)作为 CSS 背景:

<p id="myBackground1" style="background: darkorange; color: white; width: 300px; height: 40px;">此元素将用作背景.</p><p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">这个盒子使用#myBackground1 作为它的背景！</p>

请参阅 Mozilla hacks 了解详情.>

Can I use the canvas element as a css background?

解决方案

This has been possible in WebKit since 2008, see here.

<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>

Currently, Firefox 4 contains a feature, which allows you to use any element (including canvas) as a CSS background, in this fashion:

<p id="myBackground1" style="background: darkorange; color: white;  width: 300px; height: 40px;">
  This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
  This box uses #myBackground1 as its background!
</p>

See Mozilla hacks for specifics.

这篇关于使用 <canvas>作为 CSS 背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 <canvas>作为 CSS 背景 [英] Use <canvas> as a CSS background

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用 &lt;canvas&gt;作为 CSS 背景 [英] Use &lt;canvas&gt; as a CSS background

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

使用 <canvas>作为 CSS 背景 [英] Use <canvas> as a CSS background

登录关闭