1、渐变文字
<!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>
</head>
<body>
<canvas id="can" width="600px" height="300px" style="border:1px solid #131313"></canvas>
<script>
var c = document.querySelector("#can");
var ctx = c.getContext('2d');
ctx.font = "100px 微软雅黑";
//ctx.fillStyle="#f00";
// 设置线性渐变
var grd=ctx.createLinearGradient(0,0,c.width,0);
grd.addColorStop("0.3","green");
grd.addColorStop("0.7","yellow");
grd.addColorStop("1.0","orange");
// 应用渐变
ctx.fillStyle=grd;
ctx.fillText("我喜欢Web前端",0,100,500);
</script>
</body>
</html>
2、带颜色的文字
<!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>
</head>
<body>
<canvas id="can" width="600px" height="300px" style="border:1px solid #131313"></canvas>
<script>
var c = document.querySelector("#can");
var ctx = c.getContext('2d');
ctx.font = "50px 微软雅黑";
//ctx.fillStyle="#f00";
// 设置线性渐变
var grd=ctx.createLinearGradient(0,0,c.width,0);
grd.addColorStop("1.0","blue");
// 应用渐变
ctx.fillStyle=grd;
ctx.fillText("我喜欢Web前端",0,100,500);
</script>
</body>
</html>