1.6.1 线性渐变
要使用线性渐变效果填充图形，首先要使用 createLinearGradient() 方法从上下文对象中创建线性渐变对象。 createLinearGradient() 方法的四个参数确定一条虚拟线段，渐变就沿着此条线段的方向。
然后用 addColorStop 方法为线性渐变对象设置渐变线上的关键点的颜色， offset 表示关键点
是在渐变虚拟线段的什么位置， offset 的取值范围是0到1，其中0表示是起始点，1表示是终止点， 0到1之间的值表示是此虚拟线段中间的某一位置。
再将此线性渐变对象作为填充类型赋值给上下文对象的 fillStyle 属性。canvas将根据渐变虚拟线段上关键点的颜色变化填充图形。
如：
<script>
var grd = context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(offset, color);
...... context.fillStyle = grd; context.fill(); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
context.beginPath(); context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath();
// 创建线性渐变对象
var grd = context.createLinearGradient(230, 0, 370, 200);
// 添加渐变的起点处颜色
grd.addColorStop(0, "#8ED6FF");
// 添加渐变终点处的颜色
grd.addColorStop(1, "#004CB3"); context.fillStyle = grd; context.fill();
// 画边缘线 context.lineWidth = 5; context.strokeStyle = "blue";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
关于线性渐变的说明
线性渐变的方向是从 createLinearGradient() 方法的 (startX, startY) 点到 (endX,
endY) 点的一条虚拟线段。我在这里用了两个 color stop ，渐变的起始点是淡蓝色，渐变的终止点是深蓝色。Color stop 是指的在虚拟线段上的位置点，范围是0到1，其中0表示是起始点，1表示是终止点。
1.6.2 径向渐变
径向渐变与线性渐变类似，只不过渐变方向不是线段，而是两个圆之间。使用 createRadialGradient() 方法创建渐变对象，参数是渐变起始圆和终止圆。如：
<script> var grd=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(offset, color);
...... context.fillStyle = grd; context.fill();
</script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
context.beginPath(); context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath();
// 创建径向渐变对象
var grd = context.createRadialGradient(238, 50, 10, 238, 50,
200);
// 设置渐变起始圆处的颜色
grd.addColorStop(0, "#8ED6FF");
// 设置渐变终止圆处的颜色
grd.addColorStop(1, "#004CB3"); context.fillStyle = grd; context.fill();
// 画边缘线 context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
1.6.3 图案填充
要实现图案填充功能，首先要用上下文对象的 createPattern() 方法创建一个图案填充对象，
将这个对象赋值给上下文对象的 fillStyle 属性，然后使用 fill() 方法填充图形。
其中 createPattern() 方法需要两个参数，第一个参数是一个图像对象，第二个参数是重复模式，可选的模式是 repeat， repeat-x， repeat-y， 以及 no-repeat，默认情况是 repeat 。
如：
<script>
var pattern = context.createPattern(imageObj, repeatOption);
context.fillStyle = pattern; context.fill(); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
var imageObj = new Image(); imageObj.onload = function() {
var pattern = context.createPattern(imageObj, "repeat");
context.rect(10, 10, canvas.width - 20, canvas.height - 20);
context.fillStyle = pattern; context.fill();
};
imageObj.src =
"http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>