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

最新推荐文章于 2024-08-14 00:51:11 发布

原创最新推荐文章于 2024-08-14 00:51:11 发布 · 988 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Canvas API创建从上到下的线性渐变文字Logo。通过设置渐变开始和结束点的坐标，调整颜色偏移量，以及利用fillText()方法绘制实心文本，实现了视觉效果丰富的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);

效果图如下：