下图是其效果图


阴影

目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为

shadowColor：阴影颜色。其值和 CSS 颜色值一致。
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。

[url=http://www.robodesign.ro/coding/canvas-primer/20081208/example-shadows.html]下面是
canvas 阴影的例子[/url]：

复制内容到剪贴板

context.fillRect(20,?20,?150,?100);??

其效果见下图

颜色渐变

除了 CSS 颜色， fillStyle和 strokeStyle 属性可以设置为 CanvasGradient 对象。――通过 CanvasGradient可以为线条和填充使用颜色渐变。欲创建 CanvasGradient对象，可以使用两个方法：createLinearGradient 和 createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的 addColorStop方法添加颜色中间值。下面的代码演示了颜色渐变使用方法：

?

复制内容到剪贴板

//?You?need?to?provide?the?source?和?destination?(x,y)?coordinates?? ??

//?for?the?gradient?(from?where?it?starts?和?where?it?ends).? ??

?

我也准备了一个更复杂的例子，使用了线性颜色渐变、阴影和文字。其效果见下图

canvas 演示

如果你想知道使用 Canvas可以做些什么，可以参看以下的工程：

Opera Widget：
SimAquarium
Artist's Sketchbook
Spirograph

在线工程和演示
Newton polynomial
Canvascape - "3D Walker"
Paint.Web - painting demo, open-source
Star-field flight
Interactive blob