Как я могу имитировать градиенттрансформацию svg в html5 canvas?

#html #canvas #svg

#HTML #холст #svg

Вопрос:

сейчас я работаю над проектом по преобразованию svg в html5 canvas.

но я обнаружил, что для меня нет API для достижения gradientTransform в canvas.

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

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

Ответ №1:

Ну, на самом деле, когда вы используете Canvas gradient: создайте LinearGradient (float x0, float y0, float x1, float y1)

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

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

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

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