HTML5 Canvas как CSS-фоновое изображение?

Question

Можно ли сделать фоновое изображение DIV холстом, который можно изменить с помощью getContext ("2d")?

Answer 1

Ну, вы можете поместить элемент canvas внутри div, максимизировать его высоту и ширину, установить его положение на относительное, а его z-индекс на отрицательное значение.

Однако, если вы хотите использоватьнастоящий CSS background-image:... вы должны создать свое изображение внутри холста.Затем вы можете использовать toDataURL, чтобы получить URL-адрес данных, который вы можете использовать в качестве значения для вашего оригинала background-image:

var canvas = document.getElementById('canvas');
var data = canvas.toDataURL();
var myElement = document.getElementById('myelement');

myElement.style.backgroundImage = 'url('+data+')';

Если вы не хотите создавать новый фон, но манипулируйте существующим, загрузите исходный фон в объект Image (или получите ссылку) и используйте drawImage:

var image = new Image();
image.onload = function(){
    context.drawImage(this,0,0);
    someCallbackToManipulateTheImage();
}
var src = myElement.style.backgroundImage.substr(4);
src.substr(0,src.length - 1);
image.src = src;

Answer 2

Установите фоновое изображение div следующим образом:

"url('" + canvas.toDataURL() + "')";

Редактировать: На этом этапе обратите внимание, что вы также можете делать с холстом все, что хотите, так как фоновое изображение будетпродолжать содержать только данные изображения, которые были на холсте в тот момент, когда вы вызвали canvas.toDataURL ().Не стесняйтесь сбрасывать или рисовать на холсте, так как это не повлияет на фон вашего div в этот момент.

Answer 3

Вы можете иметь холст внутри div с абсолютной позицией CSS, у других элементов z-индекс должен быть больше, чем у холста.