web-dev-qa-db-ja.com

CSSの背景として<canvas>を使用します

Canvas要素をcss背景として使用できますか？

javascriptcsscanvas
56
Ben Shelock

これは、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 をご覧ください。

62
livedo

はい!!!! CSSバックグラウンドにキャンバスを配置できます。

var Canvas = document.createElement("canvas");
... do your canvas drawing....
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });

これはかなり古い質問ですが、このページにアクセスした人に答えを投稿したいと思ったのは、これが正しい答えであるため、たった1行のコードで.toDataURL 関数。 キャンバスをサポートするすべてのブラウザで動作します。

58
frenchie

最も近いのは、canvasにレンダリングし、その上でtoDataUrl()を呼び出してコンテンツを画像として取得し、その結果を目的の要素のbackground-imageプロパティ。ただし、これは静的な背景のみを提供します。ただし、canvasをさらに更新したい場合は、Johanが既に提案したように、代わりにキャンバスを別の要素の後ろに配置する必要があります。

11
bcat

私は過去数週間この同じ機能を達成しようと試みてきましたが、bcatによって提案されたものと同じ最良の解決策を見つけました：

  1. キャンバスのレンダリング（表示または非表示）
  2. 「canvas.toDataURL」でキャンバス画像を取得します
  3. この画像データを要素の背景画像として割り当てます（私はMooToolsを使用します）

悪いニュースは、静的画像の場合は素晴らしいですが、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>
3
Putuko

Firefoxでbackgroundの-moz-element(#id)を試してください。

CSSの-webkit-canvas(name) _WebKitベースのブラウザのbackground.

3
user1635543

z-indexを使用してtoDataURL()のパフォーマンスを低下させることなく、この動作をすぐにエミュレートできます。 ：element（#mycanvas） "2017年現在））

ここでJSFiddleを動作させます。私はこれを書きませんでした、すべてのクレジットは Derek Leung に行きます：

http://jsfiddle.net/DerekL/uw5XU/

2
Jonathan

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 /

デモ： https://vitaliy-bobrov.github.io/css-Paint-demos/

2
Vitalii Bobrov

コメントできないため、これに対する独自の回答を作成します。

この回答は、@ 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>
0
MDooley47