HTML5 Canvas作为CSS背景图片？

Question

是否可以使DIV的背景图像成为可以使用getContext("2d")修改的画布？

Answer 1

好吧,你可以在div中放置一个canvas元素,最大化它的高度和宽度,将其位置设置为relative,将z-index设置为负值.

但是,如果要使用真正的CSS background-image:...,则必须在画布中创建图像.然后toDataURL,您可以使用获取可用作原始值的数据网址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-index 必须大于画布。