Я использую градиентную маску «source-in» на холсте, и я хочу анимировать растягивание формы маски & градиент. Вот код композитинга, функция называется drawList:Холст исчезает при анимации «source-in» globalCompositeОперационная маска
var r = ctx.createLinearGradient(1100, 0, 1200 + stretch,0);
r.addColorStop(0,"rgba(255, 255, 255, 1.0");
r.addColorStop(0.8,"rgba(255, 255, 255, 0.0");
ctx.fillStyle = r;
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(300, 0, 1200 + stretch, 1000);
stretch начинается с 0 и увеличивается в функции оживляющей с помощью requestAnimationFrame, которые я прошла проверку работы при анимации простого прямоугольника или даже ctx.clearRect(300, 0, 1200 + stretch, 1000). Функция анимации вызывает drawList на каждой итерации и drawList.
При загрузке текста списка от drawList исчезает в соответствии с заполнением градиента прямоугольника выше. Проблема, с которой я сталкиваюсь, заключается в том, что, как только вызывается функция анимации, холст стирается и не перерисовывает список. Я бы использовал ctx.clip(), но мне действительно нужна градиентная заливка, чтобы создать эффект затухания.
Любые идеи? Это ограничение холста?
Звучит так, как вы ожидали. Все, что нарисовано перед прямыми, исчезнет, но вы должны увидеть прямоугольник прямоугольника. Не забудьте установить комп обратно на источник после rect. или используйте 'ctx.save()' и 'ctx.restore()' для сброса состояний GPU. – Blindman67
@ Blindman67 save() & restore() были всего лишь билетом. Спасибо чувак. Можете ли вы представить ответ, чтобы я мог отметить его как решение, и вы можете получить ответ? – Rooncicle