html5 svg vs花岗岩像背景的画布 [英] html5 svg vs canvas for granite like background

问题描述

我想制作像 http://www.tivli.com/ 这样的背景花岗岩在中心有一个渐变。我已经找到了如何在w3c教程中同时使用渐变，但是有没有关于如何在html5 canvas或svg中制作花岗岩背景的教程？感谢。

解决方案

您引用的网站实际上使用了简单的'noize.png'，然后使用css3径向渐变来构建背景。我知道你已经知道了，我为未来的读者提到这一点。

鉴于这个事实，我会在我想要学习的其余答案中假设，而不是复制面食解决方案。

但是在画布上它很容易和有趣...（特别是现在闪光灯最终正式死了，Hurray）。

正如其他人已经在你的问题的评论中所建议的那样，为什么不使用无缝噪声图像？ （你知道在哪里可以找到一个：P）。

你仍然可以将这个图像作为'DATA'嵌入到html中（提示：甚至可以将图像数据直接输入到画布中，将其渲染为你的'noise.php'）。

但是接下来......你是对的：如果你想改变noize-size？

你想知道如何制作花岗岩/噪音无论如何..

数学上和程序上描述这个噪音低于字符计数（文件大小），而不是提供一个现成的图像（-fragment）？

启动UPDATE 2第1部分：

实际上，在一些良好的夜间睡眠后，我意识到/记住视觉噪声是确定随机性的最佳方式之一。人类非常擅长寻找视觉模式，即使专业人员使用此（因此，这也是大量使用在密码学中，人们需要 - 例如 - 一个有用的一次性填充）。 >
另见'指挥官'克罗克福德的YUI讲座'安全原则'从19m7s 到22m37s。

现在为什么这很重要？那么 ECMA脚本（aka javascript）定义了一个松散的Math.random（）函数：
$ b

返回一个数值具有正号，大于或等于0但小于1，随机或伪随机地选择，并且在该范围内近似均匀分布，使用
实现相关算法或策略

重新阅读斜体/粗体部分并欢迎自己成为现实：每个浏览器（品牌/版本）有它自己的随机程序!!

但这是什么意思？那么..简单地说..根据浏览器（版本）的ES脚本实施（咳嗽咳嗽IE）：基于Math.random（）的噪音将/可能会呈现可见模式在你的噪音独立于可能的瓷砖大小）!!

因此，对于这个答案的其余部分，我们将假设一个理想的世界，在这个世界中，浏览器吐出适当的随机数，或者你控制并使用更强的'可预测'的随机解决方案，详见这篇精彩的文章表示谷歌的泡泡意外泄露:)

结束更新2第一部分

所以让我们从径向渐变部分开始。你已经知道了这一点。

好的，然后跟随画布中的噪音函数（你可以在放射状渐变之前做到这一点，但这个顺序更好一些谷物和漫射梯度产生的 - 对于普通的液晶显示器，无论如何你都会看到它们，不是真正的颜色 - ）： 这是通过生成随机像素来完成的。 。
会有很多不同的算法可供使用，使用了一个直接的，你可以不用数学就能理解。


请注意，为现代全屏分辨率生成噪声很容易大于1兆像素的分辨率，所以这会很慢！为了克服这一点，我们需要生成和重新使用一个小的无缝瓷砖。我们在已经有径向渐变的全尺寸图像中将其用作 pattern-fill 。

我还假设您想要将放射状的渐变液体放置在视口的中间，所以如果您想要采用固定的方式（而不是noize）。 png / css3方式引用），你还需要一个额外的事件处理程序'onResize（）'使画布呈现一个新的背景。
为什么？那么，如果你在哪里让浏览器自动缩放这个背景图片（在页面加载时创建），那么你的噪点的粒度会改变，甚至导致你不想要的可见模式。

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

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

如果您喜欢，请使用它（保留此答案的链接）做你自己的事情。

请不要忘记接受这个问题的答案（希望我的:)）

希望这有助于！ / p>

更新2第2部分：

更多与canvas交互的方式。也可以计算/（重新）使用/生成/保存/导入pixel-maps / array（例如png或base64或jpg或...），请参阅优秀的文章更快的8位甚至更快的32位（如果浏览器支持'Uint8ClampedArray' ImageData对象的data属性的类型）pixel-array的，包括一个适当的解决方案来处理处理器的字节顺序!!

所以给这个以后认为，事实证明，做这个'正确'实际上是一个挑战，应该分为两部分：

• 我在哪里可以得到我的噪音数据（Math.random（）或自定义的随机或预先定义的外部（图像，json-string，random.com）或嵌入式（包装？）数据）？
  
• 是在全屏尺寸/画布上构建/存储/重新使用此噪音的最快方法。 这个更新的第1部分，我们不想在可见噪声中出现模式，我开始倾向于使用嵌入噪声发生器的一些预先渲染的随机噪声数据（意思是无缝平铺）：否则有运行你自己的非引擎优化的随机函数（时间..很多..）的开销。
  
  另外，我认为一个人可能会逃脱只是黑色和白色，然后透明度..这可能会大大加快速度并减少嵌入的像素数据。
  
  想一想：黑色或白色等于0或1 ..
  
  在基准64中，一个字符可以表示6位。所以30x30像素的图像有900像素除以6位= 150个字符（甜点增量6像素，所以接下来是36像素* 36像素是216个字符）。
  

  i want to make to make a granite like background like http://www.tivli.com/ with a gradient at the center. i have found how to do gradient with both in the w3c tutorials, but are there any tutorials on how to make granite backgrounds in html5 canvas or svg? Thanks.

  解决方案

  The site you referenced actually uses a simple 'noize.png' and then uses css3 radial gradients to buildup that background. I know you already knew that, I'm mentioning this for future readers.
  Given this fact, I'll assume in the rest of my answer you want to learn, not a copy-pasta solution.

  I've given up on svg looong time ago. But in canvas it's easy and fun... (especially now flash is FINALLY officially dead. Hurray).

  So as others have already suggested in the comments to your question, why not use a seamless noise image? (you know where to find one :P).
  You could still embed this image as 'DATA' in the html(, HINT: even or even feed image-data straight into canvas that will render it as your 'noise.php').

  But then.. you are right: what if you wanted to change the noize-size?
  And you want to know how to make granite/noise anyway..
  And is mathematically/programmatically describing this noise lower in character-count (file-size) than supplying a ready-made image(-fragment)?

  Start UPDATE 2 part 1:
  Actually, after some good night sleep I realized/remembered that visual noise is one of the BEST way's to determine randomness. Humans are notoriously good at finding visual patterns, even professionals use this (and as such this is also heavily used in cryptography where one would need -for instance- a useful one time pad).
  Also see 'commander' Crockford's YUI-lecture 'Principles of Security' from 19m07s to 22m37s.

  Now why is this important? Well ECMA-script (aka javascript) defines a loose Math.random() function:

  "returns a number value with positive sign, greater than or equal to 0 but less than 1, chosen randomly or pseudo randomly with approximately uniform distribution over that range, using an implementation-dependent algorithm or strategy"

  Re-read the italic/bold part and welcome yourself to reality: each and every browser (brand/version) has it's own random-routine!!
  "But what does it mean?" Well.. simply put.. Depending on browser(version)'s ES-Script implementation (cough cough IE): Noise based on Math.random() will/might render visible patterns in your noise (independently of possible tile-size)!!
  So for the rest of this answer we are going to assume either an ideal world where browsers spit-out proper random numbers, or that you took control and use a stronger 'predictable' random-solution as is discussed on this wonderful article that google's bubble accidentally leaked :)
  End Update 2 part 1

  So let's start with the radial gradient-part. You already figured that one out.

  Ok, then follows the noise-function in canvas (you could you could do this before the radial gradient, but this order gives a nicer grain and diffuses color banding the gradient produces -on a average lcd you would see them anyway since they're not true color-) : this is done by generating random pixels.
  There would be a lot of different algorithms to use, I've used a straight-forward one that you can understand without math..
  Note that generating noise for a modern day full-screen resolution is easily larger than 1 mega-pixel in resolution, so this would be slow! To overcome this we need to generate and RE-USE a small seamless tile. We use this as a pattern-fill in our full-size image that already has the radial gradient.

  I also assume you want the radial gradient liquidly placed in the middle of the view-port, so if you want to go the fixed way (as opposed to the noize.png/css3 way you referenced), you'll also need an extra eventhandler 'onResize()' to have canvas render a new background. Why? Well if you where to let the browser scale this background-image (created upon page-load) automatically, then the nice grain-size of your noise would change to, EVEN leading to visible PATTERNS that you would not want..

  (Since I desperately want to go to sleep now..): The rest is thoroughly explained in the source-code of the function I wrote for you..

  Here is the link to the fully documented code I wrote for you: jsfiddle.net/sU74C/ and here you can see it in full-screen preview.   UPDATE 1: function genNoise 80% FASTER!!

  Use it if you like (retaining the link to this answer) or learn from it and do your own thing.
  PLEASE DON'T FORGET to accept AN answer to this question (hopefully mine :))

  Hope this helps!

  UPDATE 2 part 2:
  There are more way's to interact with canvas. One could also calculate/(re-)use/generate/save/import pixel-maps/array's (as png or base64 or jpg or ...) for instance, see this excellent article on faster 8bit and even faster 32bit (if the browser supports 'Uint8ClampedArray' as the type of the data property of the ImageData object) pixel-array's, including a proper solution to account for the endianness of the processor!!

  So after giving this some considerable thought, it turns out that to do this 'right' is actually a challenge and should be divided in 2 parts:

  • Where do I get my noise-data (Math.random() or custom random or pre-defined external (image, json-string, random.com) or embedded (packed?) data)?
  • What is the fastest way to build/store/re-use this noise on full-screen size/canvas.

  Given the statements in part 1 of this update and that we don't want patterns in our visible noise, I'm starting to lean to using some pre-rendered 'random' noise data (meant to tile seamlessly) that is embedded in the noise-generator: otherwise there is the overhead of running your own none-engine-optimized random function (times..a lot..).
  Also I think one might get away with just black and white and transparency afterwards.. This might considerably speed-up things up AND reduce embedded pixel-data.
  Think about it: black or white equals 0 or 1..
  In base 64 one character can represent 6 bits. So a 30x30px image has 900 px divided by 6 bits = 150 characters (sweet-spot increments by 6px, so next is 36px*36px is 216 characters).

  这篇关于html5 svg vs花岗岩像背景的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！