是否可以将 DIV 的背景图像制作成可以使用 getContext("2d") 修改的 Canvas ?
最佳答案
好吧,您可以在 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;
关于css - HTML5 Canvas 作为 CSS 背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9971249/