Canvas要素をcss背景として使用できますか?
これは、2008年以来WebKitで可能です。ここを参照してください。
<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>
現在、Firefox 4には、CSSの背景として任意の要素(キャンバスを含む)を次のように使用できる機能が含まれています。
<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>
詳細については Mozilla hacks をご覧ください。
はい!!!! CSSバックグラウンドにキャンバスを配置できます。
var Canvas = document.createElement("canvas");
... do your canvas drawing....
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });
これはかなり古い質問ですが、このページにアクセスした人に答えを投稿したいと思ったのは、これが正しい答えであるため、たった1行のコードで.toDataURL
関数。 キャンバスをサポートするすべてのブラウザで動作します。
最も近いのは、canvas
にレンダリングし、その上でtoDataUrl()
を呼び出してコンテンツを画像として取得し、その結果を目的の要素のbackground-image
プロパティ。ただし、これは静的な背景のみを提供します。ただし、canvas
をさらに更新したい場合は、Johanが既に提案したように、代わりにキャンバスを別の要素の後ろに配置する必要があります。
私は過去数週間この同じ機能を達成しようと試みてきましたが、bcatによって提案されたものと同じ最良の解決策を見つけました:
悪いニュースは、静的画像の場合は素晴らしいですが、Chrome時々"blinks"で、そしてFirefoxではblinks-a-lot。この「厄介な点滅」を取り除くための回避策を誰かが知っているかもしれません。
宜しくお願いします。
P :.
<!DOCTYPE html>
<html>
<head>
<title>Asign canvas to element background</title>
<script type="text/javascript" src="/js/mootools.1.2.4.js"></script>
<style type="text/css">
* {
outline:0;
padding:0;
margin:0;
border:0;
}
body {
color:#fff;
background:#242424;
}
</style>
<script>
window.addEvent('domready',function() {
//GET BODY
var mibodi = $('mibodi');
var viewportSize = mibodi.getSize();
//GET CANVAS
var micanvas = $('micanvas');
var ctx = micanvas.getContext('2d');
var playAnimation = true;
//GET DIV
var midiv = $('midiv');
//VARIABLES
var rotate_angle = 0;
var rotate_angle_inc = 0.05;
//FUNCIÓN DE INICIALIZACIÓN
function init(){
ctx.clearRect (0, 0, 512, 512); //CLEAR CANVAS
ctx.fillStyle = 'rgba(128,128,128,1)';
ctx.strokeStyle = 'rgba(255,255,255,1)';
if (playAnimation) {
setInterval(draw,100);//
}
} //INIT
//FUNCIÓN DE DIBUJADO
function draw() {
//CLEAR BACKGROUND
ctx.clearRect (0, 0, 512, 512);
//DRAW ROTATING RECTANGLE
ctx.save();
ctx.translate( micanvas.width / 2, micanvas.height / 2 );
ctx.rotate( rotate_angle );
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
//GET CANVAS IMAGE
var dataURL = micanvas.toDataURL("image/png");
//SET IMAGE AS BACKGROUND OF THE ELEMENTS
midiv.setStyle('background-image', 'url(' + dataURL + ')');
mibodi.setStyle('background-image', 'url(' + dataURL + ')');
//ANGLE INCREMENT
rotate_angle = rotate_angle + rotate_angle_inc;
} //DRAW
//BEGIN TO DRAW
init();
});//domeady
</script>
</head>
<body id="mibodi" >
<canvas id="micanvas" width="512" height="512" style="float:left;" style="display:none;">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>
<div id="midiv" style="width:512px;height:512px;background:#f00;float:left;">
Sample
</div>
</body>
</html>
Firefoxでbackground
の-moz-element(#id)
を試してください。
CSSの-webkit-canvas(name)
_WebKitベースのブラウザのbackground
.
z-index
を使用してtoDataURL()
のパフォーマンスを低下させることなく、この動作をすぐにエミュレートできます。 :element(#mycanvas) "2017年現在))
ここでJSFiddleを動作させます。私はこれを書きませんでした、すべてのクレジットは Derek Leung に行きます:
CSS Paint APIを使用できます
.elem {
backgound: Paint(squares);
}
詳細はこちらをご覧ください:
ブログの投稿:
https://vitaliy-bobrov.github.io/blog/exploring-the-css-Paint-api/https://vitaliy-bobrov.github.io/blog/css -Paint-in-action-bar-chart /
コメントできないため、これに対する独自の回答を作成します。
この回答は、@ livedo、@ Eric Rowell、および@shabuncに基づいています。
http://jsfiddle.net/MDooley47/yj26psdb/
window.i = 0;
function draw(w, h) {
window.i+=5;
if (window.webkitURL != null) {
var ctx = document.getCSSCanvasContext("2d", "squares", 100, 100);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, w, h);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, w, h);
}
else {
var ctxmozc = document.getElementById("squares");
var ctxmoz = ctxmozc.getContext("2d");
ctxmoz.fillStyle = "rgb(200,0,0)";
ctxmoz.fillRect (10, 10, w, h);
ctxmoz.fillStyle = "rgba(0, 0, 200, 0.5)";
ctxmoz.fillRect (30, 30, w, h);
}
}
setInterval(function(){draw(window.i, window.i);}, 500);
div {
background: -webkit-canvas(squares);
background: -moz-element(#squares) repeat-x;
width:575px;
height:475px;
border:2px solid black
}
<body>
<div></div>
<canvas id="squares" name="squaresmoz" style="display: none;" ></canvas>
</body>