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：< / p>

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() + "')";

编辑：此时，请注意您也可以使用画布自由地执行所需操作，因为背景图像将继续仅包含您调用画布时画布中的图像数据。 toDataURL（）。随意丢弃或画在画布上，因为它不会影响你的div的背景。

Answer 3

你可以在div中使用绝对css位置的画布，其他元素的z-index必须大于画布。

HTML5 Canvas作为CSS背景图片？

3 个答案: