1.createLinearGradient() 创建线性渐变
//Linear adj. 直线的 线性的
//Gradient n. 梯度 变化率
createLinearGradient(x1,y1,x2,y2)——颜色渐变的起始坐标和终点坐标
addColorStop(位置,"颜色值")——0表示起点...插入点...1表示终点，配置颜色停止点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
canvas{background:#A9A9A0;}
</style>
</head>
<body>
<canvas id="bcanvas" width="800" height="800">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('bcanvas');
var pi=canvas.getContext('2d');
g=pi.createLinearGradient(250,250,550,550);
g.addColorStop(0,"#000000");
g.addColorStop(0.25,"red");
g.addColorStop(0.5,"yellow");
g.addColorStop(0.75,"green");
g.addColorStop(1,"#FFFFFF");
pi.lineWidth=2;
pi.strokeStyle="yellow";
pi.fillStyle=g;
pi.moveTo(400,500);
pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
pi.closePath();
pi.fill();
pi.beginPath();
pi.strokeStyle="orange";
pi.fillStyle="#A9A9A0";
pi.moveTo(400,500);
pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
pi.closePath();
pi.fill();
pi.beginPath();
pi.lineWidth=1;
pi.strokeStyle="green";
pi.fillStyle="red";
pi.font="60px 隶书";
pi.strokeText("纵",375,270);
pi.fillText("横",375,340);
pi.strokeText("横",375,340);
</script>
</body>
</html>
线性渐变测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas学习渐变</title>
<style type="text/css">
canvas{background:#A9A9A0;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var c=canvas.getContext('2d');
c.beginPath();
g=c.createLinearGradient(0,110,250,110);
g.addColorStop(0,"blue");
g.addColorStop(0.25,"#FFFFFF");
g.addColorStop(0.4,"#8f4b2e");
g.addColorStop(0.7,"red");
g.addColorStop(1,"yellow");
c.fillStyle=g;
c.fillRect(0,0,250,250);
c.beginPath();
g=c.createLinearGradient(250,0,250,250);
g.addColorStop(0,"blue");
g.addColorStop(0.25,"#FFFFFF");
g.addColorStop(0.4,"#8f4b2e");
g.addColorStop(0.7,"red");
g.addColorStop(1,"yellow");
c.fillStyle=g;
c.fillRect(250,0,250,250);
c.beginPath();
g=c.createLinearGradient(125,250,0,500);
g.addColorStop(0,"orange");
g.addColorStop(0.25,"red");
g.addColorStop(1,"yellow");
c.fillStyle=g;
c.fillRect(0,250,250,250);
c.beginPath();
g=c.createLinearGradient(250,250,250,500);
g.addColorStop(0,"blue");
g.addColorStop(0.1,"white");
g.addColorStop(0.2,"brown");
g.addColorStop(0.4,"red");
g.addColorStop(1,"yellow");
c.fillStyle=g;
c.fillRect(250,250,250,250);
</script>
</body>
</html>
2.createRadialGradient(x1,y1,r1,x2,y2,r2)（起始圆心，终止圆心） 创建放射状/环形的渐变
//Radial adj. 径向的 放射式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas放射式渐变</title>
<style type="text/css">
canvas{background:#A9A9A0;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var c=canvas.getContext('2d');
// g=c.createRadialGradient(50,300,0,700,300,150);
// g.addColorStop(0,"blue");
// g.addColorStop(0.25,"#FFFFFF");
// g.addColorStop(0.4,"#8f4b2e");
// g.addColorStop(0.7,"red");
// g.addColorStop(1,"yellow");
// c.fillStyle=g;
// c.fillRect(50,50,700,500);
g=c.createRadialGradient(400,300,10,400,300,200);
g.addColorStop(0,"blue");
g.addColorStop(0.25,"#FFFFFF");
g.addColorStop(0.4,"#8f4b2e");
g.addColorStop(0.7,"red");
g.addColorStop(1,"yellow");
c.fillStyle=g;
c.arc(400,300,200,0,Math.PI*2);
c.fill();
</script>
</body>
</html>
绘画太极