本文介绍了使用 <canvas>作为 CSS 背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以使用 canvas 元素作为 css 背景吗?
解决方案
WebKit 自 2008 年起就可以实现这一点,参见 这里.
目前,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 背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!