线性渐变
线性渐变以线性的模式来改变颜色，也就是水平，垂直或对角方向
addColorStop() 方法有两个参数。第一个参数是0-1之间的一个数值，这个数值指定该颜色进入渐变多长的距离，第二个参数是颜色值
createLinearGradient(x1,y1,x2,y2) 这4个参数决定渐变的方向和距离
水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同
垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同
一个对角线的线性渐变水平和垂直方向上的参数都不相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
// 声明一个线性渐变对象
var g=context.createLinearGradient(0,0,400,400);
// 给渐变对象添加渐变色
g.addColorStop(0,'red');
g.addColorStop(0.2,'orange');
g.addColorStop(0.4,'tomato');
g.addColorStop(0.6,'yellow');
g.addColorStop(0.8,'brown');
g.addColorStop(1,'gray');
// 把渐变对象给到样式填充图形
context.fillStyle=g;
// 绘制图形
context.fillRect(0,0,400,400);
}
</script>
</head>
<body>
<canvas width="400px" height="400px"></canvas>
</body>
</html>
径向渐变
径向渐变以圆形模式来改变颜色，颜色以圆形的中心向外辐射
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同心圆径向渐变</title>
<script>
window.onload = function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
// 声明一个径向渐变对象
// 径向渐变xy小圆心 半径 径向渐变xy轴大圆心 半径
var g=context.createRadialGradient(150,150,50,150,150,150);
// 给渐变对象添加渐变色
g.addColorStop(0,'red');
g.addColorStop(0.2,'orange');
g.addColorStop(0.4,'tomato');
g.addColorStop(0.6,'purple');
g.addColorStop(0.8,'lavender');
g.addColorStop(1,'rgb(204, 26, 248)');
// 把渐变对象给到样式填充图形
context.fillStyle=g;
// 绘制图形
context.fillRect(0,0,300,300);
}
</script>
</head>
<body>
<canvas width="300px" height="300px"></canvas>
</body>
</html>
