渐变
Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：
Object createLinearGradient(x1, y1, x2, y2);
创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。
Object createRadialGradient(x1, y1, r1, x2, y2, r2);
创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。
渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：
void addColorStop(position, color);
其中position表示添加颜色的位置，取值范围为[0, 1]，，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。
渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。
那咱们一起看一下下面这个例子：
</script>
</html>
其效果如下图所示：
大家试图去尝试一下！哪里有不明白的地方可以相互交流.
只有不快的斧，没有劈不开的柴。
