Как сделать градиент текста в холсте?

Question

Я хочу заполнить текст текстом сверху снизу. Я следил за четырьмя или пятью различными учебниками о том, как добиться этого, но он не работает.

У меня есть два различных динамических источников текста, что-то вроде этого:

<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). Кто-нибудь знает?

Edit: Просто заметил ошибку:

TypeError: firstNameGradient.colorStop is not a function

Answer 1

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 rep недовольство базовой линии.Вы можете изменить это путем установки текста базовой линии вверх - это делает его легче обеспечить линию градиента:

firstNameGradient.textBaseline = "top"; 

Спецификации предоставляют способ получить высоту шрифта, а также, но не Сотовая связь не имеет еще реализовала эту часть, поэтому вам нужно либо догадаться, либо использовать DOM element to measure height.

Answer 2

Извините за столь наивны, чтобы использовать 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: У меня нет опыта работы с холстом, так что если я делаю сам из быть идиотом, мне очень жаль.

Answer 3

Вы можете использовать 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); 

И вот demo on JSFiddle