<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>
<style>
#mycanvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="600px" height="600px">
</canvas>
<script>
var mycanvas=document.getElementById("mycanvas");
var cxt=mycanvas.getContext("2d");
// 线性渐变
// 指定渐变区域
// 第一个参数是渐变开始点的x坐标
// 第二个参数是渐变开始点的y坐标
// 第三个参数是渐变结束点的x坐标
// 第四个参数是渐变结束点的y坐标
var linear=cxt.createLinearGradient(0,0,200,0);
// 指定几个颜色
// 初始点颜色
linear.addColorStop(0,"green");
linear.addColorStop(0.4,"pink");
linear.addColorStop(0.5,"red");
// 终点颜色
linear.addColorStop(1,"blue");
// 将这个渐变设置为fillStyle
cxt.fillStyle=linear;
cxt.fillRect(0,0,200,150);
// 圆形渐变
// 前三个参数决定的是扩散的小圆，后三个是大圆
// 第一个参数是渐变的开始圆的x坐标
// 第二个参数是渐变的开始圆的y坐标
//第三个参数是渐变的开始圆的半径
// 第四个参数是渐变的结束圆的x坐标
// 第五个参数是渐变的结束圆的y坐标
// 第六个参数是渐变的结束圆的半径
var radial=cxt.createRadialGradient(400,100,0,400,100,100);
radial.addColorStop(0,"red");
radial.addColorStop(0.25,"green");
radial.addColorStop(0.5,"pink");
radial.addColorStop(0.75,"yellow");
radial.addColorStop(1,"blue");
cxt.fillStyle=radial;
cxt.arc(400,100,100,0,2*Math.PI,true);
cxt.fill();
</script>
</body>
</html>
