开发者

How can I imitate the svg's gradientTransform in html5 canvas?

开发者 https://www.devze.com 2023-03-03 20:58 出处:网络
i\'m now working on a project to convert svg to html5 canvas. but i found there is no api for me to achieve the gradient开发者_运维知识库Transform in canvas.

i'm now working on a project to convert svg to html5 canvas.

but i found there is no api for me to achieve the gradient开发者_运维知识库Transform in canvas.

so i can not 100% convert them to look the same.

is there anyone know something about it?


Well in fact when you are using Canvas gradient : createLinearGradient(float x0, float y0, float x1, float y1)

You can define x0 y0 and x1 y1 so for having a rotating gradient you can specify your start point like 0,0 and final like canvas.width,canvas.height

At the end it look like svg rotation(-45deg)

See this awesome cheat sheet for more informations : http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

Also an untested method could consist to use canvas Transform when you draw your gradient : This tutorial is about Transform : https://developer.mozilla.org/fr/Tutoriel_canvas/Transformations

0

精彩评论

暂无评论...
验证码 换一张
取 消