html5 svg vs画布，用于花岗岩般的背景

我想做一个像花岗岩一样的背景，中间有一个梯度。我已经在w3c教程中找到了如何使用这两个工具进行渐变，但是有没有关于如何在html5画布或svg中制作花岗岩背景的教程？谢谢。

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

我很久以前就放弃了。但在画布上，这很简单也很有趣。。。（特别是现在flash终于正式消亡了。万岁）

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

但是。。您是对的：如果您想更改noize大小，该怎么办？
你想知道如何制造花岗岩/噪音。
在数学上/编程上描述这种噪声的字符数（文件大小）是否比提供现成的图像（-fragment）低

开始更新2第1部分：
事实上，在睡了一个好觉之后，我意识到/记得视觉噪音是确定随机性的最好方法之一。人类以善于发现视觉模式而闻名，甚至（因此，这也被大量用于密码学中，例如需要一个有用的密码）。
另请参见“Crockford对22M37的YUI演讲”

为什么这很重要？嗯：

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

重新阅读斜体/粗体部分，并欢迎您自己进入现实：每个浏览器（品牌/版本）都有自己的随机例程
“但这是什么意思？”嗯。。简言之。。取决于浏览器（版本）的ES脚本实现（IE）：基于Math的噪波。random（）将/可能在噪波中呈现可见模式（独立于可能的磁贴大小）
因此，对于这个答案的其余部分，我们将假设一个理想的世界，在这个世界中，浏览器会吐出适当的随机数，或者您控制并使用一个更强的“可预测”随机解决方案，正如在google的意外泄漏中所讨论的：）
结束更新2第1部分

让我们从径向梯度部分开始。你已经弄明白了

好的，然后遵循画布中的噪波函数（你可以在径向渐变之前这样做，但是这个顺序会提供更好的纹理并扩散渐变产生的效果-在平均lcd上，你会看到它们，因为它们不是真彩色-）：这是通过生成随机像素来完成的 可能会有很多不同的算法可供使用，我使用了一种不需要数学也能理解的简单算法。
请注意，为现代全屏分辨率生成噪声的分辨率很容易大于100万像素，因此这会很慢！为了克服这个问题，我们需要生成并重新使用一个小的无缝瓷砖。我们将其用作已具有径向渐变的全尺寸图像中的填充图案

我也假设你想要把径向梯度放在视图端口的中间，所以如果你想走固定的方式（相对于你引用的NOIZ.PNG/CSS3方式），你还需要一个额外的EvEnthDuner-OnResiZe（）来让画布渲染一个新的背景。 为什么？如果你想让浏览器自动缩放这个背景图像（在页面加载时创建），那么你的噪音的良好粒度就会改变，甚至会导致你不想要的可见图案

（因为我现在非常想睡觉。）剩下的在我为您编写的函数的源代码中有详细的解释

这里是我为您编写的完整文档代码的链接：您可以在中看到它。更新1:函数genNoise快80%

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

希望这有帮助

更新2第2部分：
有更多的方式与画布交互。还可以计算/（重新）使用/生成/保存/导入像素贴图/阵列（如png或base64或jpg或…），例如，在更快的8位甚至更快的32位（如果浏览器支持“Uint8ClampedArray”作为ImageData对象的数据属性类型）像素阵列上看到这一点，包括一个适当的解决方案来解释处理器的持久性

因此，经过深思熟虑后，我们发现，要做到“正确”实际上是一个挑战，应该分为两部分：

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

考虑到本更新第1部分中的陈述，以及我们不希望在可见噪声中使用模式，我开始倾向于使用嵌入在噪声生成器中的一些预渲染“随机”噪声数据（意味着无缝平铺）：否则会有运行自己的无引擎优化随机函数的开销（次数..很多..）.
此外，我认为一个人可能会逃脱只是黑色和白色和透明度之后。。这可能会大大加快速度