createLinearGradient（创建路径样式对象）
var gradient = createLinearGradient( startX, startY, endX, endY )
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]
创建可重用的线性渐变（对象）。
该对象可以分配给任何 strokeStyle 和/或 fillStyle。
然后 stroke() 或 fill（）将使用对象的渐变颜色为 Path 着色。
创建渐变对象分为两步：
- 创建渐变对象本身。在创建过程中，你将在画布上定义一条渐变开始和结束的线。使用
var gradient = context.createLinearGradient创建渐变对象。 - 然后添加构成渐变的 2 种（或更多）颜色。这是通过使用
gradient.addColorStop向渐变对象添加多个色标来完成的。
参数：
-
startX，startY 是渐变开始的画布坐标。在起点（和之前），画布是最低的
gradientPercentPosition的颜色。 -
endX，endY 是渐变结束的画布坐标。在结束点（和之后）画布是最高的
gradientPercentPosition的颜色。 -
gradientPercentPosition 是分配给色标的 0.00 到 1.00 之间的浮点数。它基本上是沿着该特定颜色停止适用的线的百分点航路点。
- 渐变开始于百分比 0.00，即画布上的[startX，startY]。
- 渐变以百分比 1.00 结束，画布上为[endX，endY]。
- 技术说明： 术语百分比在技术上并不正确，因为值从 0.00 到 1.00 而不是 0％到 100％。
-
CssColor 是分配给此特定色块的 CSS 颜色。
渐变对象是一个对象，你可以使用（并重复使用！）使你的路径笔触和填充变为渐变色。
侧注： 渐变对象不是 Canvas 元素的内部对象，也不是 Context。它是一个独立且可重用的 JavaScript 对象，你可以将其分配给你想要的任何路径。你甚至可以使用此对象为不同 Canvas 元素上的 Path 着色（！）
颜色停止是沿着渐变线的（百分比）航点。在每个颜色停止航点上，梯度完全（==不透明）着色，并带有指定的颜色。沿着色标之间的渐变线的中间点被着色为该色和前一色的渐变。
有关 Canvas 渐变的重要提示！
创建渐变对象时，整个画布将无形地填充该渐变。
当你通过一条路径时，会发现不可见的渐变，但只会在被抚摸或填充的路径上显露出来。
-
如果你创建一个红色到洋红色的线性渐变，如下所示：
// create a linearGradient var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0); gradient.addColorStop(0,'red'); gradient.addColorStop(1,'magenta'); ctx.fillStyle=gradient; -
然后 Canvas 将无形地看到你的渐变创作，如下所示：
-
但是直到你使用渐变的
stroke()或fill()，你才会在 Canvas 上看到任何渐变。 -
最后，如果使用渐变描边或填充路径，隐形渐变在画布上变得可见…但仅限于绘制路径的位置。
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// Create a linearGradient
// Note: Nothing visually appears during this process
var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'magenta');
// Create a polyline path
// Note: Nothing visually appears during this process
var x=20;
var y=40;
ctx.lineCap='round';
ctx.lineJoin='round';
ctx.lineWidth=15;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x+30,y+50);
ctx.lineTo(x+60,y);
ctx.lineTo(x+90,y+50);
ctx.lineTo(x+120,y);
ctx.lineTo(x+150,y+50);
ctx.lineTo(x+180,y);
ctx.lineTo(x+210,y+50);
ctx.lineTo(x+240,y);
ctx.lineTo(x+270,y+50);
ctx.lineTo(x+300,y);
ctx.lineTo(x+330,y+50);
ctx.lineTo(x+360,y);
// Set the stroke style to be the gradient
// Note: Nothing visually appears during this process
ctx.strokeStyle=gradient;
// stroke the path
// FINALLY! The gradient-stroked path is visible on the canvas
ctx.stroke();
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=400 height=150></canvas>
</body>
</html>