canvas

看到旁边的图，如果要问是怎么画的，估计第一反应是Photoshop，其实这是用JavaScript在canvas标签上通过CanvasRenderingContext2D对象画出来的。接下来看看如果通过JavaScript画出这张图来。
首先需要了解以下知识：
HTML中用于脚本画图的canvas元素
目前Firefox 1.5, Safari 1.3,及Opera 9以上版本都支持此元素，鸟IE都出8了，还是不支持，想在IE上看可以安装http://excanvas.sourceforge.net来模拟效果。

1. 属性
   • height默认值300
   • width默认值300
2. 方法
   • getContext()返回一个CanvasRenderingContext2D对象用于在canvas上绘图，你必须传入字符串参数“2d”

CanvasGradient

可以将该对象赋值给CanvasRenderingContext2D对象的strokeStyle及fillStyle属性。CanvasRenderingContext2D对象的createLinearGradient()及createRadialGradient()返回类型均为CanvasGradient。

该对象的addColorStop(float offset, String color)方法可以改变指定点的颜色。该方法至少要使用一次，否则绘图将是透明的。

CanvasRenderingContext2D.createRadialGradient( )

1. 方法介绍
   • CanvasGradient createRadialGradient(float xStart, float yStart, float radiusStart, float xEnd, float yEnd, float radiusEnd)
2. 参数
   • xStart, yStart
     • 起始圆圆心坐标
   • radiusStart
     • 起始圆半径
   • xEnd, yEnd
     • 结束圆圆心坐标
   • radiusEnd
     • 结束圆半径
3. 返回值
   • 一个CanvasGradient对象

样例
以下是实现上图效果的JavaScript代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radial = ctx.createRadialGradient(60, 75, 0, 100, 75, 60);
radial.addColorStop(0, '#000');
radial.addColorStop(0.5, 'red');
radial.addColorStop(1, '#999');
ctx.fillStyle = radial;
ctx.stroke();
ctx.fillRect(0, 0, 200, 150);