web-dev-qa-db-fra.com

Utiliser <canvas> comme arrière-plan CSS

Puis-je utiliser l'élément canvas comme arrière-plan CSS?

javascriptcsscanvas
56
Ben Shelock

Cela est possible dans WebKit depuis 2008, voir ici.

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

Actuellement, Firefox 4 contient une fonctionnalité, qui vous permet d'utiliser n'importe quel élément (y compris le canevas) comme arrière-plan CSS, de cette manière:

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

Voir Piratage de Mozilla pour les détails.

62
livedo

Oui !!!! Vous pouvez mettre un canevas en arrière-plan CSS.

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

Je sais que c'est une assez vieille question mais j'avais envie de poster ma réponse pour les personnes qui visiteraient cette page car c'est la bonne réponse, en une seule ligne de code, en utilisant le .toDataURL une fonction. Cela fonctionne dans tous les navigateurs qui prennent en charge le canevas.

58
frenchie

Je pense que le plus proche que vous pourriez obtenir est de le rendre dans un canvas, d'appeler toDataUrl() dessus pour récupérer le contenu sous forme d'image, et l'affectation qui en résulte au background-image propriété. Cela ne donnera cependant qu'un arrière-plan statique. Cependant, si vous souhaitez pouvoir mettre à jour davantage le canvas, vous devrez plutôt positionner le canevas derrière un autre élément, comme Johan l'a déjà suggéré.

11
bcat

J'ai essayé de réaliser cette même fonctionnalité ces dernières semaines, la meilleure solution que j'ai trouvée est la même que celle proposée par bcat:

  1. Toile de rendu (visible ou cachée)
  2. Obtenez une image de canevas avec "canvas.toDataURL"
  3. Attribuer ces données d'image comme image de fond pour l'élément (j'utilise MooTools)

La mauvaise nouvelle, pour les images statiques fonctionne très bien, mais avec une animation en Chrome parfois "clignote", et dans Firefox clignote beaucoup. Peut-être que quelqu'un connaît une solution pour se débarrasser de ce "clignotement désagréable".

Meilleures salutations.
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

Essayez -moz-element(#id) pour CSS background dans Firefox.

Et -webkit-canvas(name) pour CSS background dans WebKit navigateurs basés.

3
user1635543

Vous pouvez émuler ce comportement rapidement sans la baisse des performances de toDataURL() en utilisant z-index (d'accord, c'est une solution de contournement, car les images CSS 4/CSS Houdini n'ont pas implémenté "background: element (#mycanvas)" en 2017))

Travailler JSFiddle ici. Je n'ai pas écrit ceci, tout le mérite revient à Derek Leung :

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

2
Jonathan

Vous pouvez utiliser l'API CSS Paint

.elem {
  backgound: Paint(squares);
}

Voir plus de détails ici:

Articles de blog:

https://vitaliy-bobrov.github.io/blog/exploring-the-css-Paint-api/https://vitaliy-bobrov.github.io/blog/css -Peinture en action-graphique à barres /

Démos: https://vitaliy-bobrov.github.io/css-Paint-demos/

2
Vitalii Bobrov

Impossible de commenter, je vais donc créer ma propre réponse à cela.

Cette réponse est basée sur @livedo, @Eric Rowell et @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