我想制作像http://www.tivli.com/ 这样的花岗岩背景，中心有渐变。我在 w3c 教程中找到了如何使用这两种方法进行渐变，但是有没有关于如何在 html5 画布或 svg 中制作花岗岩背景的教程？谢谢。
【问题讨论】：
标签： html html5-canvas
您引用的站点实际上使用了一个简单的“noize.png”，然后使用 css3 径向渐变来构建该背景。我知道您已经知道这一点，我将向未来的读者提及这一点。
鉴于这一事实，我将在我的其余答案中假设您想学习，而不是复制粘贴解决方案。 em>
我很久以前就放弃了 svg。但是在画布中它既简单又有趣……（尤其是现在 flash 终于正式死了。万岁）。
正如其他人已经在 cmets 中对您的问题提出的建议，为什么不使用 无缝 噪声图像？ （你知道在哪里可以找到：P）。
您仍然可以将此图像作为“数据”嵌入到 html（，提示：甚至甚至将图像数据直接馈送到画布中，将其呈现为您的“noise.php”）。
但是……你是对的：如果你想改变噪声大小怎么办？
而且你想知道如何制作花岗岩/噪音..
并且以数学/编程方式描述这种噪声的字符数（文件大小）是否比提供现成的图像（-fragment）要低？
开始更新 2 第 1 部分：
实际上，经过一夜好眠后，我意识到/记得视觉噪音是确定随机性的最佳方法之一。众所周知，人类善于发现视觉模式，甚至是professionals use this（因此，这在密码学中也被大量使用——例如——一个有用的one time pad）。
另请参阅 'commander' Crockford 的 YUI 讲座 'Principles of Security' from 19m07s 至 22 分 37 秒。
现在为什么这很重要？嗯ECMA-script (aka javascript) defines a loose Math.random() function：
"返回一个带正号的数值，大于或等于0但小于1，随机选择或伪随机选择 在该范围内大致均匀分布，使用 依赖于实现的算法或策略"
重新阅读斜体/粗体部分并欢迎自己来到现实：每个浏览器（品牌/版本）都有自己的随机例程！！
“但是这是什么意思？”嗯.. 简单地说.. 取决于浏览器（版本）的 ES-Script 实现（咳嗽 IE）：Noise based on Math.random() 将/可能会在您的噪音中呈现可见模式（独立于可能的图块大小）！！
所以对于这个答案的其余部分，我们将假设一个理想的世界，浏览器吐出适当的随机数，或者你控制并使用更强大的“可预测”随机解决方案，正如在this wonderful article 上讨论的那样，谷歌的@ 987654327@ 意外泄露 :)
结束更新 2 第 1 部分
让我们从径向渐变部分开始。你已经想通了。
好的，然后遵循画布中的噪声函数（您可以在径向渐变之前执行此操作，但此顺序提供更好的颗粒并扩散color banding 渐变产生 - 在平均液晶显示器上，无论如何您都会看到它们因为它们不是真彩色-)：这是通过生成随机像素来完成的。
会有很多不同的算法可供使用，我使用了一种简单明了的算法，您无需数学即可理解..
请注意，现代全屏分辨率产生的噪点很容易大于 1 兆像素的分辨率，所以这会很慢！为了克服这个问题，我们需要生成并重用一个小的无缝图块。我们将其用作已具有径向渐变的全尺寸图像中的 pattern-fill。
我还假设您希望将径向渐变流畅地放置在视口中间，因此如果您想采用固定方式（与您引用的 noize.png/css3 方式相反），您还将需要一个额外的事件处理程序“onResize()”来让画布呈现一个新的背景。 为什么？好吧，如果您让浏览器在哪里自动缩放此背景图像（在页面加载时创建），那么您的噪声的良好粒度会变为，甚至会导致您不想要的可见 PATTERNS..
（因为我现在很想睡觉..）：其余部分在我为您编写的函数的源代码中进行了详尽的解释..
这是我为您编写的完整文档代码的链接： jsfiddle.net/sU74C/，您可以在 full-screen preview 中看到它。 更新 1： 函数 genNoise 80% FASTER!!
如果您愿意，可以使用它（保留此答案的链接）或从中学习并做自己的事情。
请不要忘记接受这个问题的答案（希望是我的:)）
希望这会有所帮助！
更新 2 第 2 部分：
还有更多与画布交互的方式。例如，还可以计算/（重新）使用/生成/保存/导入像素图/数组（如 png 或 base64 或 jpg 或 ...），请参阅更快的 8 位甚至更快的 32 位上的excellent article（如果浏览器支持“Uint8ClampedArray”作为 ImageData 对象的数据属性的类型）像素数组，包括一个适当的解决方案来解释处理器的字节顺序！！
因此，经过深思熟虑后，事实证明，要做到“正确”实际上是一个挑战，应该分为两部分：
鉴于此更新第 1 部分中的陈述，并且我们不希望可见噪声中出现模式，我开始倾向于使用一些预渲染的“随机”噪声数据（旨在无缝平铺），即嵌入到噪声发生器中：否则会产生运行您自己的非引擎优化随机函数的开销（多次..很多..）。
此外，我认为之后可能会只使用黑白和透明度。这可能会大大加快速度并减少嵌入的像素数据。
想一想：黑色或白色等于 0 或 1..
在 base 64 中，一个字符可以表示 6 位。所以一个 30x30px 的图像有 900 像素除以 6 位 = 150 个字符（甜蜜点增加 6 像素，所以接下来是 36 像素*36 像素是 216 个字符）。
【讨论】：