如何在 html5 画布中模仿 svg 的 gradientTransform？

【问题标题】：How can I imitate the svg's gradientTransform in html5 canvas?如何在 html5 画布中模仿 svg 的 gradientTransform？
【发布时间】：2011-05-06 21:52:04
【问题描述】：

我现在正在做一个将 svg 转换为 html5 画布的项目。

但我发现我没有 api 来实现 canvas 中的 gradientTransform。

所以我不能 100% 将它们转换成看起来一样。

有人知道吗？

【问题讨论】：

标签： html canvas svg

【解决方案1】：

事实上，当您使用 Canvas 渐变时： createLinearGradient(float x0, float y0, float x1, float y1)

您可以定义 x0 y0 和 x1 y1 以便具有旋转渐变，您可以指定起点如 0,0 和终点如 canvas.width,canvas.height

最后看起来像 svg 旋转(-45deg)

查看这个很棒的备忘单了解更多信息： http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

还有一种未经测试的方法可以包括在绘制渐变时使用画布变换：本教程是关于 Transform 的：https://developer.mozilla.org/fr/Tutoriel_canvas/Transformations

【讨论】：