图像是这样的(取自http://g.raphaeljs.com/barchart.html):
现在,Youtube通过在源代码中嵌入图像来完成(令人尴尬的相同)相同的效果:
(在Youtube主页上,右键单击背景显示它,然后右键单击图像并“显示图像属性”[ffox]):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata
我试图发现这行代码在源代码中的位置,但由于动态创建,我不能.
所以,我的问题是:
“有没有办法将平铺的背景应用于页面,使用通过算法生成的png图像CLIENT-SIDE?” (最好使用javascript)
我是webdev和javascript的初学者,但我喜欢将我的学习基于定义的问题来解决,所以这将是学习一些东西的好方法
谢谢阅读!
更新:
对于任何对使用javascript生成平铺纹理感兴趣的人,我发现了这个,这看起来非常有趣:
http://somethinghitme.com/projects/canvasterrain/
http://somethinghitme.com/projects/canvasterrain/js/canvasTerrain.js
解决方法
您可以使用Javascript在画布上绘图(即使隐藏了画布元素),因此生成您想要的任何内容(包括简单的噪声平铺).
资源学习画布绘图:https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
之后,您可以使用方法toDataURL(像“data:image / png; base64 ….”这样的字符串)将画布导出为URL,浏览器将其解释为图像的传统URL,因此您可以设置它作为你的身体元素的CSS背景.
警告1:所有现代浏览器都支持Canvas,您可以使用ExplorerCanvas在IE上模拟它 – 但我不知道ExplorerCanvas是否支持.toDataURL()
警告2:画布与分辨率有关,所以我建议你生成一个小块(32 * 32或64 * 64)并重复它
编辑:平铺背景的示例:http://jsfiddle.net/SfzPc/12/
编辑2:具有嘈杂背景的完整示例:http://jsfiddle.net/SfzPc/14/