一种用javascript创建随机噪声背景图像(png)的方法?

前端之家收集整理的这篇文章主要介绍了一种用javascript创建随机噪声背景图像(png)的方法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
YouTube的新布局添加了一个我非常喜欢的背景随机噪音,在其他网站上几乎看到了相同的效果,所以我计划在我的网页原型中使用相同的技术,或者至少有这个“技巧”我的工具箱供将来使用.

图像是这样的(取自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

解决方法

为了生成客户端映像,我建议你看看HTML5 canvas元素.

您可以使用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/

原文链接:https://www.f2er.com/js/158872.html

猜你在找的JavaScript相关文章