Использование в качестве фона CSS

могу ли я использовать элемент canvas в качестве фона css?

720   8  

8 ответов:

Это было возможно в WebKit с 2008 года, см. здесь.

<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  
2015-01-23 15:06:18

Да!!!! Вы можете поместить холст в CSS фон.

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

Я знаю, что это довольно старый вопрос, но мне захотелось опубликовать свой ответ для людей, которые посетят эту страницу, потому что это правильный ответ, всего в одной строке кода, используя

56  
2012-02-21 00:15:12

Я думаю, что ближе всего вы могли бы получить, чтобы сделать в canvas, называют toDataUrl() на нем, чтобы получить содержимое в виде изображения, и присвоение этого результата к нужному элементу background-image собственность. Однако это даст только статический фон. Если вы хотите иметь возможность дальнейшего обновления canvas, однако, тогда вам нужно будет вместо этого разместить холст за другим элементом, как уже предложил Йохан.

10  
2010-08-03 17:22:29

попробовать -moz-element(#id) для CSS background в Firefox.

и -webkit-canvas(name) для CSS background in WebKit на основе браузеров.

4  
2015-01-23 14:40:24

Я пытался достичь этой же функции в последние недели, лучшее решение, которое я нашел, это то же самое, предложенное bcat:

  1. рендер холст (видимый или скрытый)
  2. получить изображение холста с " холст.toDataURL"
  3. Asign это изображение-данные в качестве фонового изображения для элемента (я использую MooTools)

плохая новость для статических изображений работает, но с анимацией в Chrome иногда "мигание", а в Firefox мигает-а-много. Может быть, кто-то знает обходной путь, чтобы избавиться от этого "неприятного мигания".

С наилучшими пожеланиями.
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  
2011-07-22 14:39:36

не могу прокомментировать, поэтому я создам свой собственный ответ на это.

этот ответ основан на @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  
2015-10-30 07:54:56

вы можете эмулировать это поведение быстро без снижения производительности toDataURL() используя z-index(конечно, это обходной путь, так как CSS images 4 / CSS Houdini не реализовал "background: element (#mycanvas)" по состоянию на 2017 год))

работает JSFiddle здесь. Я этого не писал, вся заслуга идет на Дерек Люн:

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

0  
2017-03-30 02:03:02

вы можете использовать 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/

0  
2018-05-18 16:45:19

Comments

    Ничего не найдено.
Click here to cancel reply.