canvas实现字体颜色渐变及解析

最新推荐文章于 2025-05-21 22:21:26 发布

原创最新推荐文章于 2025-05-21 22:21:26 发布 · 4.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端

h5和css3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML5的CanvasAPI通过JavaScript创建并应用线性渐变效果到画布上的文本。从获取Canvas元素到设置填充样式，再到使用fillText方法绘制带有渐变颜色的HelloWorld文本，详细解析了每一步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
canvas HTML代码：

<canvas id="canvas" width="300" height="150" style="border:1px solid #aaa">
			您的浏览器不支持HTML5canvas标签
</canvas>

javascriput代码:

    var c=document.getElementById("canvas");
		    var cxt=c.getContext("2d");
		   cxt.font="30px Verdana";
		    //创建渐变
		   var gradient=cxt.createLinearGradient(0,0,c.width,0);
		   gradient.addColorStop("0","orange");
           gradient.addColorStop("0.3","pink");
            gradient.addColorStop("0.4","blue");
           gradient.addColorStop("0.6","red");
		     //填充渐变
		    cxt.fillStyle=gradient;
		    cxt.fillText("Hello world ",10,100);

解析：
1.c.getContext(“2d”)：getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
2.createLinearGradient(0,0,c.width,0);：createLinearGradient(x0,y0,x1,y1)x0 表示渐变开始点的X轴坐标 ,y0 表示渐变开始点的Y轴坐标 ,x1 表示渐变结束点的X轴坐标 ,y1 表示渐变结束点的Y轴坐标
3.fillStyle：设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）
4.fillText：fillText(text,x,y) - 在 canvas 上绘制实心的文本