线性渐变
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 =