Как я могу имитировать Svg GradientTransform в холсте html5?

Question

Я сейчас работаю над проектом по конвертации svg в холст html5.

, но я обнаружил, что для меня нет api для достижения градиентного преобразования в canvas.

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

Кто-нибудь знает что-нибудь об этом?

Answer 1

На самом деле, когда вы используете Canvas Градиент: createLinearGradient (с плавающей точкой x0, с плавающей точкой y0, с плавающей точкой x1, с плавающей точкой y1)

Вы можете определить x0 y0 и x1 y1, поэтому для наличия вращающегося градиента вы можете указатьваша начальная точка, например 0,0, и конечная, как canvas.width, canvas.height

В конце она выглядит как svg вращение (-45 градусов)

См. этот удивительный шпаргалку для получения дополнительной информации:http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

Также непроверенный метод может заключаться в использовании холста Transform при рисовании градиента: это руководство о Transform: https://developer.mozilla.org/fr/Tutoriel_canvas/Transformations