css - HTML5 Canvas 作为 CSS 背景图片？

Question

是否可以将 DIV 的背景图像制作成可以使用 getContext("2d") 修改的 Canvas ？

Answer 1

好吧，您可以在 div 中放置一个 Canvas 元素，最大化其高度和宽度，将其位置设置为 relative 并将其 z-index 设置为负值。

但是，如果您想使用真正的 CSS background-image:...，则必须在 Canvas 内创建图像。然后你可以使用 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;