Используйте <canvas>в качестве фона CSS - PullRequest
Новая
       12

Используйте <canvas>в качестве фона CSS

56 голосов
/ 03 августа 2010

Можно ли использовать элемент canvas в качестве фона CSS?

Ответы [ 8 ]

62 голосов
/ 10 января 2011

Это возможно в 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 содержит функцию, которая позволяет использовать любой элемент (включая canvas) в качестве фона 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 .

57 голосов
/ 21 февраля 2012

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

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

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

11 голосов
/ 03 августа 2010

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

3 голосов
/ 04 ноября 2012

Попробуйте -moz-element(#id) для CSS background в Firefox.

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

3 голосов
/ 22 июля 2011

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

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

Плохоnews, для статических изображений прекрасно работает , но с анимацией в 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>
2 голосов
/ 18 мая 2018

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

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

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

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

0 голосов
/ 30 октября 2015

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

Этот ответ основан на @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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...