我想要做像背景一样花岗岩http://www.tivli.com/与中心的梯度。 我已经找到了如何做梯度都在W3C教程，但是否有关于如何使花岗岩背景的HTML5画布或SVG任何教程？ 谢谢。
Answer 1:
你居然引用的网站使用一个简单的“noize.png”，然后使用CSS3径向渐变来积累这样的背景下。 我知道你已经知道了，我提到这对于未来的读者。
鉴于这一事实，我会在你想了解我的答案，而不是复制面食解决方案的其余部分承担。
我已经放弃了对SVG looong很久以前。 但是，在画布上它的方便和乐趣......（尤其是现在闪存是终于正式死亡。华友世纪）。
因此，正如其他人在评论你的问题已经提出，为什么不使用一个无缝的噪声图像？ （你知道在哪里可以找到一个：P）。
你仍然可以嵌入这个形象在html“DATA”（，提示：连或连喂图像数据直入画布，将呈现为您的“noise.php”）。
但后来..你是正确的：如果你想改变NOIZE大小？
你想知道如何使花岗岩/噪音反正..
和在数学/编程描述该噪声在字符计数（文件大小），比供给现成图像（-Fragment）低？
开始更新2第1部分：
事实上，一些良好的睡眠，我意识到以后/想起视觉噪声是最好的方式的确定随意性之一。 人类是在寻找视觉模式出了名的好，甚至专业人士使用 （并因此，这也在很大程度上在密码中使用，其中一个需要-对于实例-一个有用的一次性垫 ）。
另见“ 指挥官 ” Crockford的YUI讲座从19m07s“安全原则” ，以22m37s。
为什么这很重要？ 那么ECMA脚本（又称JavaScript）定义了一个松散的Math.random（）函数 ：
“具有大约均匀的分布在该范围返回与正号，大于或等于0，但小于1，随机选择或伪一个数字值随机地， 使用与实现相关的算法或策略 ”
重读斜体/加粗部分，欢迎自己的现实：每一个浏览器（品牌/版），有它自己的随机程序！
“但是这是什么意思？” 嗯..简单地说..视浏览器（版本）的ES-脚本执行（咳咳IE）： 基于的Math.random（）噪声会/可能会在噪声（独立可能的瓷砖尺寸） 呈现明显的图案 ！
因此，对于这个答案，我们要承担起任一个理想的世界里，浏览器吐了适当的随机号码，或者你把控制和使用更强大的“预见”随机解决方案，是在讨论的其余这种精彩文章 ，谷歌的泡沫小心泄露:)
端更新2部分1
因此，让我们开始使用径向渐变部分。 你已经计算过，一出。
好了，然后跟随在画布噪声功能（你可以，你可以径向渐变之前做到这一点，但这个顺序给出了一个更好的粮食和扩散色带梯度产生-on一个普通液晶，你会看到他们无论如何因为他们是不正确的color-）： 这是由生成随机像素完成 。
会有很多不同的算法来使用，我用了一个直接的一个，你可以不理解数学..
请注意，对于一个现代的全屏分辨率产生的噪音很容易比第1个决议百万像素较大，因此这将是缓慢的！ 为了克服这一点，我们需要生成和再利用小无缝瓷砖。 我们以此为模式，填补了我国在全尺寸图像已经有径向渐变。
我还以为你要的径向渐变liquidly放置在视图端口的中间，所以如果你想要去的固定方式（而不是你所引用的noize.png / CSS3的方式），你还需要一个额外的事件处理程序“在onResize（）”有帆布呈现一个新的背景。 为什么？ 那么，如果你在哪里让浏览器规模这样的背景图像（在页面加载创建）自动，那么你的噪声很好的粒度会改变，甚至可能导致你不想可视图案..
（因为我拼命想现在就睡觉..）：剩下的就是彻底我为你写的功能的源代码解释..
这里是链接到完整记录的代码，我给你们写： jsfiddle.net/sU74C/ ，在这里你可以看到它在全屏幕预览 。 UPDATE 1：功能genNoise FASTER 80％！
如果你喜欢（保留链接到这个答案）使用，或从中学习，做自己的事。
请不要忘记要接受这个问题的答案（希望我的:)）
希望这可以帮助！
更新2第2部分：
还有更多的方式对用帆布互动。 人们还可以计算/（重新）使用/生成/保存/进口像素地图/数组（如PNG或Base64或JPG或......）例如，看到这个优秀的文章更快的8位甚至32位的速度更快（如果浏览器支持“Uint8ClampedArray”作为的ImageData对象的数据属性的类型的）像素阵列的，包括一个适当的解决方案，以考虑所述处理器的存储!!
所以，给这个有些经过深思熟虑之后，事实证明，这样做“正确”实际上是一个挑战，应在2个部分可分为：
- 我在哪里我的噪声数据（的Math.random（）或自定义随机或预先定义的外部（图像，JSON字符串，random.com）或嵌入（打包？）数据）？
- 什么是建立/存储/再利用的全屏幕大小/画布这种噪音的最快方式。
鉴于此更新中的第1部分和我们不希望在我们可见的噪声模式的语句，我开始瘦到使用一些预渲染的“随机”噪音数据（指瓷砖无缝）嵌入在噪声发生器：否则有经营自己的无引擎优化的随机函数的开销（times..a很多..）。
此外，我认为人们可能逃脱只有黑和白和透明度事后..这可能会大大加快，达到东西，减少入像素的数据。
想想看：黑色或白色等于0或1 ..
在基部64的一个字符可以表示6位。 因此，一个图像30x30px已900像素除以6位= 150个字符（最佳点递增6个像素，所以下一个是36px * 36px是216个字符）。
文章来源: html5 svg vs canvas for granite like background
