1

我想制作像http://www.tivli.com/这样的花岗岩背景，中心有渐变。我在 w3c 教程中找到了如何使用这两种方法进行渐变，但是有没有关于如何在 html5 画布或 svg 中制作花岗岩背景的教程？谢谢。

4

1 回答 1

2

您引用的站点实际上使用了一个简单的“noize.png”，然后使用 css3 径向渐变来构建该背景。我知道您已经知道这一点，我为未来的读者提及这一点。
鉴于这一事实，我将在我的其余答案中假设您想学习，而不是复制意大利面解决方案。

我很久以前就放弃了svg looong。但是在画布中它既简单又有趣……（尤其是现在 flash 终于正式死了。万岁）。

因此，正如其他人已经在对您的问题的评论中提出的那样，为什么不使用无缝噪声图像呢？（你知道在哪里可以找到一个：P）。
您仍然可以将此图像作为“数据”嵌入到 html（，提示：甚至甚至将图像数据直接馈送到画布中，将其呈现为您的“noise.php”）。

但是……你是对的：如果你想改变噪声大小怎么办？
而且你想知道如何制作花岗岩/噪音......
并且以数学/编程方式描述这种噪音的字符数（文件大小）低于提供现成的图像（-片段）？

开始更新 2 第 1 部分：
实际上，经过一夜好眠后，我意识到/记得视觉噪音是确定随机性的最佳方法之一。众所周知，人类擅长寻找视觉模式，即使是专业人士也使用它（因此，这在密码学中也被大量使用——例如——一个有用的一次性密码本）。
另请参阅从 19 分 7 秒到 22 分 37 秒的“指挥官”克罗克福德的 YUI 讲座“安全原则”。

为什么这很重要？那么ECMA 脚本（又名 javascript）定义了一个松散的 Math.random() 函数：

“返回一个带正号的数值，大于或等于 0 但小于 1，随机或伪随机选择， 在该范围内近似均匀分布，使用依赖于实现的算法或策略”

重新阅读斜体/粗体部分并欢迎自己来到现实：每个浏览器（品牌/版本）都有自己的随机程序！
“但是这是什么意思？” 嗯.. 简单地说.. 取决于浏览器（版本）的 ES 脚本实现（咳嗽 IE）：基于 Math.random() 的噪声将/可能在噪声中呈现可见模式（与可能的图块大小无关） ！！
所以对于这个答案的其余部分，我们将假设一个理想的世界，浏览器吐出适当的随机数，或者你控制并使用更强大的“可预测”随机解决方案，正如谷歌泡沫的这篇精彩文章中所讨论的那样意外泄露 :)结束更新 2 第 1 部分

所以让我们从径向渐变部分开始。你已经想通了。

好的，然后遵循画布中的噪声函数（您可以在径向渐变之前执行此操作，但是此顺序会提供更好的颗粒并扩散渐变产生的色带- 在平均液晶显示器上，您无论如何都会看到它们，因为它们是不是真彩色-)：这是通过生成随机像素来完成的。
会有很多不同的算法可供使用，我使用了一种简单明了的算法，您无需数学就可以理解。
请注意，现代全屏分辨率产生的噪声很容易大于 1 兆像素的分辨率，所以这会很慢！为了克服这个问题，我们需要生成并重用一个小的无缝图块。我们将其用作已具有径向渐变的全尺寸图像中的图案填充。

我还假设您希望将径向渐变流畅地放置在视口中间，因此如果您想采用固定方式（与您引用的 noize.png/css3 方式相反），您还需要一个额外的eventhandler 'onResize()' 让画布呈现一个新的背景。为什么？好吧，如果您在哪里让浏览器自动缩放此背景图像（在页面加载时创建），那么您的噪声的良好粒度将变为，甚至会导致您不想要的可见图案..

（因为我现在非常想睡觉..）：其余部分在我为您编写的函数的源代码中进行了详尽的解释..

这是我为您编写的完整文档代码的链接： jsfiddle.net/sU74C/在这里您可以在全屏预览中看到它。   更新 1：功能 genNoise 80% 更快！

如果您愿意，可以使用它（保留此答案的链接）或从中学习并做自己的事情。
请不要忘记接受这个问题的答案（希望是我的:)）

希望这可以帮助！

更新 2 第 2 部分：
有更多与画布交互的方式。例如，还可以计算/（重新）使用/生成/保存/导入像素图/数组（如 png 或 base64 或 jpg 或 ...），请参阅这篇关于更快 8 位甚至更快 32 位的优秀文章（如果浏览器支持“Uint8ClampedArray”作为 ImageData 对象的数据属性的类型）像素数组，包括解决处理器字节序的正确解决方案！

因此，经过深思熟虑后，事实证明，要做到这一点“正确”实际上是一个挑战，应该分为两部分：

  • 我从哪里获得噪声数据（Math.random() 或自定义随机或预定义的外部（图像、json 字符串、random.com）或嵌入（打包？）数据）？
  • 在全屏尺寸/画布上构建/存储/重新使用这种噪音的最快方法是什么。

鉴于此更新第 1 部分中的陈述，并且我们不希望可见噪声中出现模式，我开始倾向于使用嵌入在噪声发生器：否则会产生运行您自己的非引擎优化随机函数的开销（时间..很多..）。
此外，我认为之后可能会只使用黑白和透明度。这可能会大大加快速度并减少嵌入的像素数据。
想一想：黑色或白色等于 0 或 1。
在 base 64 中，一个字符可以表示 6 位。所以一个 30x30px 的图像有 900 像素除以 6 位 = 150 个字符（甜蜜点增加 6 像素，所以接下来是 36 像素*36 像素是 216 个字符）。

于 2012-07-27T14:21:25.717 回答