作为新力军，苹果为我们带来了canvas标签。canvas首次在Mac OS X中的Dashboard中被引入，之后又被苹果公司的Safari浏览器所支持，紧接着就成为HTML5的标准，被IE内核以外的标准浏览器所支持。苹果做的好事还不止这一桩，它认为SVG太笨重了，于是它把SVG里的滤镜标签统统CSS属性化（SVG的滤镜比IE滤镜还多呢，而且功能更全面）。firefox一看不对劲，连忙自己也搞一套私有属性，只不过是前缀由-webkit-改为-moz-罢了。opera的反应比较呆滞，应该说私底下非常不满，因为opera的CTO就是CSS的发明者Hakon Wium Lie，不喜欢别人对自己的东西啥搞。因此我实现线性渐变就困难重重了，IE需要用IE滤镜，firefox在动态创建SVG存在一些问题，需要用其-moz-前缀的CSS私有属性，safari与chrome需要用-webkit-前缀的CSS私有属性，opera需要用SVG。现在一个个突破吧。
IE要用到DXImageTransform.Microsoft.Gradient滤镜（最后那个Gradient的首字母大写小写无所谓）。
属性
说明
enabled
是否启用滤镜，默认为true
gradientType
是垂直渐变还是水平渐变，默认是0(垂直渐变)，1为水平渐变
startColorStr
起始颜色，能接受一个8位hex颜色值，从#FF000000到#FFFFFFFF，默认是蓝色#FF0000F；或者使用red,green等颜色值F
endColorStr
结束颜色，能接受一个8位hex颜色值，从#FF000000到#FFFFFFFF，默认是黑色#FF000000
startColor
作用同startColorStr，接受一个0到4294967295整体颜色值，没有默认值
endColor
作用同endColorStr，接受一个0到4294967295整体颜色值，没有默认值
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
接着讲述一下SVG线性渐变的实现，因为相关的CSS私有属性都衍生于此。由于没有什么空间支持上传SVG，我只能动态生成SVG了。对我来说，能动态实现最好不过了，起码能减少请求数，少写许多大于号小于号……下面是静态实现，至于怎样加入html自己google吧。
linearGradient 有x1,x2,y1,y2等几个属性，可以帮助我们实现水平渐变或垂直渐变。我们大可以把x1,x2,y2,y2当成颜色渐变体的两个点的坐标就是。
当y1等于y2，x1不等于x2，实现水平渐变。
当x1等于x2，y1不等于y2，实现垂直渐变。
当y1不等于y2，x1不等于x2，实现角度渐变。
复制代码 代码如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>javascript线性渐变（水平） by 司徒正美</desc>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/>
<stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55" fill="url(#gradient)"/>
</svg>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
动态实现，不过在火狐中哑火了，可见火狐在SVG上也怠工了。
复制代码 代码如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>javascript线性渐变（垂直） by 司徒正美</desc>
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#008000" stop-opacity="1"/>
<stop offset="80%" stop-color="#a9ea00" stop-opacity="0"/>
</linearGradient>
</defs>
<polygon id = "s1" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/>
</svg>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>javascript线性渐变(角度) by 司徒正美</desc>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%">
<stop stop-color="black" offset="0%"/>
<stop stop-color="teal" offset="50%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</defs>
<rect x="10px" y="10px" fill="url(#content)"/>
</svg>