描边填充渐变颜色
我们已经学习了描边和填充单一颜色的，本小节我们将学习如何用渐变色描边和填充图形。
开始学习前，我们先了解一下什么是渐变色。渐变色是指颜色从明到暗，或由深转浅，或是从色彩缓慢过渡到另色彩，充满变幻无穷的神秘浪漫气息的颜色。下面这张图就是由渐变颜色完成的图形。
在 canvas 中，关于渐变的类型有两种：线性渐变和径向渐变。线性渐变会创建从起点到终点的渐变面，这个渐变面上的色带是垂直于渐变线的；径向渐变会创建自中心点向外的放射状颜色圈。
在 canvas 中创建渐变填充我们一般分为三个步骤：
接下来我们就开始学习 canvas 中渐变的实现。
我们先看案例，结合案例讲解能更好地理解线性渐变。
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.rect(,, ,)
let lg = ctx.createLinearGradient(,, ,) // 1. 创建渐变线
lg.addColorStop(, "#f00") // 2. 设定关键点
lg.addColorStop(, "#fff") // 2. 设定关键点
lg.addColorStop(, "#000") // 2. 设定关键点
ctx.fillStyle = lg; // 3. 填充应用渐变线
ctx.fill();
</script>
</body>
运行结果：
我们将上面的例子拆分讲解：
canvas的渲染上下文。
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
绘制矩形路径，坐标是 (10, 10)，长度为 200px，宽度是 100px。
ctx.rect(10,10, 200,100)
创建一条渐变线，起点是 （0, 0)，终点是 (200, 0)。
这里我们需要注意，这里的起点和终点是相对于整个画布坐标来讲的，和创建的路径是没有关联的。如果渐变线的范围超出了绘制的路径，则路径外的渐变颜色是不会的，如果渐变线的范围不足以填满绘制的路径，则会用两端的颜色填满路径。
let lg = ctx.createLinearGradient(0,0, 200,0)
设定渐变的关键点。这里我们设定了三个关键点，这三个点设定了个位置的时候应该的颜色。
这里的0，0.5，1都是指渐变线的起点到终点的比例。
lg.addColorStop(0, "#f00")
lg.addColorStop(0.5, "#fff")
lg.addColorStop(1, "#000")
将创建的渐变样式赋值给填充。
ctx.fillStyle = lg
填充路径。
ctx.fill()
到这里我们就给创建的路径填充了渐变色。
用渐变色描边和填充操作一样，也是按上面讲的三个步骤操作，我们看案例。
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.rect(,, ,)
let lg = ctx.createLinearGradient(,, ,) // 1. 创建线性渐变线
lg.addColorStop(, "#f00") // 2. 设定关键点
lg.addColorStop(, "#fff") // 2. 设定关键点
lg.addColorStop(, "#000") // 2. 设定关键点
ctx.Style = lg; // 3. 填充线性渐变
ctx.();
</script>
</body>
运行结果：
我们可以看到描边的样式也是变成了渐变色。
我们先看案例，结合案例讲解能更好地理解径向渐变。
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.rect(, , , )
let rg = ctx.createRadialGradient(,,,,,) // 1. 创建径向渐变线
rg.addColorStop(, "#f00") // 2. 设定关键点
rg.addColorStop(, "#fff") // 2. 设定关键点
rg.addColorStop(, "#000") // 2. 设定关键点
ctx.fillStyle = rg; // 3. 填充径向渐变
ctx.fill();
</script>
</body>
运行结果：
我们将上面的例子拆分讲解：
canvas的渲染上下文。
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
绘制正方形路径，正方形的中心点坐标是 (75, 75)。
ctx.rect(0, 0, 150, 150)
创建一条径向渐变线，起始圆心是 (75, 75)，起始半径 r=0，结束圆心和起始圆心重合，也是 (75, 75)，结束半径是70。
let rg = ctx.createRadialGradient(75,75,0,75,75,70)
设定渐变的关键点，这里我们设定了三个关键点。
lg.addColorStop(0, "#f00")
lg.addColorStop(0.5, "#fff")
lg.addColorStop(1, "#000")
将创建的渐变样式赋值给填充。
ctx.fillStyle = rg
填充路径。
ctx.fill()
到这里我们就给创建的路径填充了径向渐变色，使用径向渐变色描边我们类比线性渐变的写法，这里不再做说明。
本小节中我们使用到三个新的 createLinearGradient()， createRadialGradient()和渐变对象 CanvasGradient 的 addColorStop()。
createLinearGradient() 创建沿参数坐标指定的直线的渐变，该返回线性 CanvasGradient 对象。
语法：
ctx.createLinearGradient(startX, startY, endX, endY);
变量说明：
返回值：
CanvasGradient
根据指定线路初始化的线性渐变对象。
createRadialGradient() 会依照参数确定两个圆的坐标，绘制放射性渐变，该返回 CanvasGradient 对象。
语法：
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
变量说明：
返回值：
CanvasGradient
根据指定线路初始化的径向渐变对象。
addColorStop() 给渐变由偏移值和颜色值指定的断点。如果偏移值不在0到1之间，将抛出，如果颜色值不能被解析为有效的 CSS 颜色值 color，也将抛出。
语法：
void gradient.addColorStop(offset, color);
变量说明：
本小节我们主要学习了如何利用渐变图形对路径填充或者描边。渐变的相对比较难理解，希望同学们能多多学习，特别是径向渐变中的两个圆的关系，这两个圆的位置关系、大小关系不同，都会得到不同的图形。
602392714
清零编程群