如何在画布中创建文本渐变

How do I make text gradient in canvas?

本文关键字：创建 文本 渐变 布中      更新时间：2023-09-26

我想用从上到下的渐变填充文本。关于如何实现这一点，我已经学习了四五个不同的教程，但都不起作用。

我有两个不同的动态文本源，大致如下：

<div id="first-name" contentEditable="true">Olaf</div>
<div id="last-name" contentEditable="true">Smith</div>

我想画出用户在画布上写的任何东西(按下按钮后(。我知道如何获取值，所以让我们忽略这一部分，专注于两件事：

1( 如何知道用渐变填充内容的宽度。

2( 如何用渐变填充任何东西。。。

他们说你应该这样做：

var d_canvas = document.getElementById('canvas')
var context = d_canvas.getContext('2d')
var firstNameGradient = context.createLinearGradient(6,38,6,70) //no idea what values I should use
firstNameGradient.colorStop(0, '#eede85')
firstNameGradient.colorStop(1, '#fea700')
context.fillStyle = firstNameGradient
context.font = "bold 26px Tahoma"
context.fillText(firstName, 6, 38)
context.font = "bold 36px Tahoma"
context.fillText(lastName, whereFirstNameEnds, 38)

然而，无论我试图用什么价值观来填充它都不起作用。事实上，没有任何东西被吸引进来。

所以我不知道如何解决1(或2(有人知道吗？

编辑：刚刚注意到一个错误：

TypeError：firstNameGradient.colorStop不是函数

很抱歉使用w3Schools太天真了，但如果你对这个片段进行逆向工程，你应该完成任务：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

如果你需要更多的建议，请在这里查看

注意：为了爱所有神圣的事物，请不要使用w3Schools，请尝试使用MDN

注2:我没有画布的经验，所以如果我把自己打扮成一个白痴，我非常抱歉。

context.createLinearGradient(6,38,6,70) //no idea what values I should use

这定义了一条从(x1，y1(到(x2，y2(的线，这条线又描述了梯度的角度。这里看起来还可以，可能需要一些微调。

更改这些：

firstNameGradient.colorStop(0, '#eede85')
firstNameGradient.colorStop(1, '#fea700')

使用addColorStop()代替

firstNameGradient.addColorStop(0, '#eede85')
firstNameGradient.addColorStop(1, '#fea700')

要查找宽度(以像素为单位(，可以使用measureText()和返回对象的属性width：

var tw = firstNameGradient.measureText(firstName).width;

默认情况下，绘制文本时使用y表示基线。您可以通过将文本基线设置为顶部来更改这一点，这样可以更容易地提供渐变线：

firstNameGradient.textBaseline = "top";

规范也提供了一种获取字体高度的方法，但还没有浏览器实现这一部分，因此您需要猜测或使用DOM元素来测量高度。

您可以使用ctx.measureText(txt)来获得画布的正确宽度。以下是一个按要求工作的示例：

var context = document
    .querySelector('canvas')
    .getContext('2d');
var pos = {x: 50, y: 50};
var txt = 'Hello!';
var txtHeight = 50; 
context.font = txtHeight + 'px Verdana';
var txtWidth = context.measureText(txt).width; 
var gradient = context.createLinearGradient(
    pos.x, pos.y, txtWidth, txtHeight);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"blue");
context.fillStyle = gradient;
context.fillText(txt,pos.x,pos.y);

这是JSFiddle 上的演示

相关文章：