javascript - Use <canvas> as a CSS background -
Can I use the canvas element as a CSS background?
This is possible in WebKit since 2008, see .
& lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Div {background: Webkit-canvas (class); Width: 600px; Height: 600px; Border: 2px solid black} & lt; / Style & gt; & Lt; Script type = "app / x-javascript" & gt; Function draw (w, h) {var ctx = document.getCSSCanvasContext ("2d", "square", 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); } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body Onload = "Draw (300, 300)" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
Currently, there is a feature in Firefox 4, which allows you to use any element (including canvas) as a CSS background:
& lt; P id = "myBackground1" style = "background: darkorange; color: white; width: 300px; height: 40px;" & Gt; This element will be used as background & Lt; / P & gt; & Lt; P style = "background: -moz-element (# myBackground1); padding: 20px 10px; font-weight: bold;" & Gt; This box uses # myBackground1 as the background! & Lt; / P & gt;
Look for particular.
Comments
Post a Comment