如何使用画布绘制此背景形状？

Question

在我正在进行的设计中，有一个反复出现的图像背景形状，在整个网站中以不同的大小出现多次。例如，一个页面将其用作巨大的背景图像，其中此图像的顶部和底部被浏览器边缘切断。

使用画布创建并不是一个简单的模式，但据我所知，它是可能的。这就是它的样子。

我最好制作几张相同图案的图像，或者这张背景图片是否可以通过画布轻松再现？如果适用于画布，我该如何以各种尺寸重新创建它？我希望我知道如何使用画布开始这样的事情，但它超出了我的技能。

Answer 1

我已将您的形状转换为SVG形状：https://gist.github.com/1321653 - 根据您的喜好使用它。

根据caniuse.com，除IE8及更早版本外，所有常见浏览器均支持SVG。

对于IE8及更早版本，您可以将canvg（一个SVG到画布库）和explorercanvas（一个用于IE8及更早版本的画布模拟器）组合在一起。或者你可以显示一个带有背景颜色的矩形 - IE用户可能不会错过splat。

编辑：您还可以使用CSS3背景渐变创建广告，ala http://www.ecsspert.com/（仅使用CSS创建的着名徽标），但浏览器的兼容性较低。