Canvas实现从上到下渐变的文字logo

线性渐变

var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
lg.addColorStop(offset,color)

• xstart:渐变开始点x坐标
• ystart:渐变开始点y坐标
• xEnd:渐变结束点x坐标
• yEnd:渐变结束点y坐标
• offset:设定的颜色离渐变结束点的偏移量(0~1)
• color:绘制时要使用的颜色

文本绘制

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

JavaScript

// 渐变矩形
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, '#E55D87'); 
g1.addColorStop(1, '#5FC3E4');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);

// 渐变logo
var g2 = context.createLinearGradient(0, 300, 0, 350);
g2.addColorStop(0.3, 'rgb(254, 220, 69)');
g2.addColorStop(1, 'rgb(255, 0, 0)');
context.font = 'bold 48px Arial';
context.fillStyle = g2;
context.fillText('后台管理系统', 0, 350);

效果图如下：