Web Chart入门（5） 3. 实战draw2d 之图形填充色（纯色 or 渐变）

Web Chart入门（5） 3. 实战draw2d 之图形填充色（纯色 or 渐变）2013-06-30 csdn oscar999颜色渐变

draw2d 目前没有提供直接对Figure 设置渐变效果的API.

但是raphael 有提供，这样的话基本上在draw2d实现渐变成为可能。

颜色渐变功能来源

raphael 提供的图形背景色渐变的设置：看例子

<！--Add by oscar999--></HTML><！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Linear Gradient</title><script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script></head><body><script type="text/javascript" charset="utf-8">var paper = Raphael（10, 10, 800, 600）;var circle = paper.circle（150, 150, 150）;circle.attr（{"fill": "90-#f00:5-#00f:95","fill-opacity": 0.5}）;</script></body></html>

先看一下 raphael 官方API对于fill 设置渐变色的说明：

Linear gradient format: “ angle - colour [- colour [: offset ]]*- colour ”, example: “90-#fff-#000” – 90°gradient from white to black or “0-#fff-#f00:20-#000” – 0° gradient from white via red （at 20%） to black.

radial gradient: “r[（ fx ,fy ）] colour [- colour [: offset ]]*- colour ”, example: “r#fff-#000” –gradient from white to black or “r（0.25, 0.75）#fff-#000” – gradient from white to black with focus pointat 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.