javascript - 如何在 Canvas 上制作文本渐变？

Question

我想用从上到下的渐变填充我的文本。我已经遵循了四五个不同的教程来了解如何实现这一目标，但它不起作用。

我有两个不同的动态文本源，如下所示:

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

我想绘制用户在 Canvas 上写的任何内容(按下按钮后)。我知道如何获取值，所以让我们忽略该部分并关注两件事:

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 is not a function

Answer 1

抱歉，我太天真地使用了 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);

如果您需要更多建议，请查看 here

<小时/> 注意:出于对神圣事物的热爱，请不要使用 w3Schools，请尝试使用 MDN

注2:我没有使用canvas的经验，所以如果我让自己成为一个白痴，我很抱歉。