Как я могу привязать нижнюю часть градиента к контейнеру, который он заполняет холстом HTML5?

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

Проблема в том, что я не могу понять, как сделать градиентной линию с "контейнером" (форма, управляемая fillRect()). Когда я подталкиваю контейнер в правильное положение, градиент остается привязанным к нижней холста; а не в нижней части контейнера, который он заполняет.

Нижняя часть градиента должна начинаться с нижней части контейнера, который он заполняет, а не на нижней части холста. Как я могу это достичь?

//not sliding gradient container upward
function paintC1() {
 var canvas = document.getElementById('canvas-1');
 var context = canvas.getContext('2d');
 var height = canvas.height;
 var width = canvas.width;
 var grd = context.createLinearGradient(width, 0, width, height);
 grd.addColorStop(0.5, 'rgba(0,174,239,0)');
 grd.addColorStop(0.85, 'rgba(0,174,239,0.6)');
 grd.addColorStop(1, 'rgba(0,174,239,1)');
 context.fillStyle = grd;
 context.fillRect(0, 0, width, height);
}

/* for comparison */

//sliding gradient container up
function paintC2() {
 var canvas = document.getElementById('canvas-2');
 var context = canvas.getContext('2d');
 var height = canvas.height;
 var width = canvas.width;
 var grd = context.createLinearGradient(width, 0, width, height);
 grd.addColorStop(0.5, 'rgba(0,174,239,0)');
 grd.addColorStop(0.85, 'rgba(0,174,239,0.6)');
 grd.addColorStop(1, 'rgba(0,174,239,1)');
 context.fillStyle = grd;
 context.fillRect(0, -50, width, height);
}

paintC1();
paintC2();
1 ответ

Градиентная заливка относительно холста, а не элемента, поэтому для достижения вашей задачи вы должны сделать что-то подобное.

var grd = context.createLinearGradient(width, -50, width, height -50);

в противном случае вы должны перевести контекст:

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 0, 30);
var sampleW = 100;
var sampleH = 30;
gradient.addColorStop(0.5, 'rgba(0,174,239,0)');
gradient.addColorStop(0.85, 'rgba(0,174,239,0.6)');
gradient.addColorStop(1, 'rgba(0,174,239,1)');

var translations= [[30, 150],[100, 110],[170, 70],[240, 30]];

context.font = '12px verdana bold';
for (var i = 0; i < translations.length; i++) {
 var t= translations[i];
 context.save();
 // gradient is defined at the origin,
 // so we have to move the origin
 context.translate(t[0], t[1])
 context.fillStyle = gradient;
 context.fillRect(0, 0, sampleW, sampleH);
 context.strokeRect(0, 0, sampleW, sampleH);
 
 context.restore();
}

licensed under cc by-sa 3.0 with attribution.