如何在 HTML5 / Canvas 中绘制逐渐减小的波浪射线或复杂图形答案

【问题标题】：How can I draw a diminishing wavy ray or complex figures in HTML5 / Canvas如何在 HTML5 / Canvas 中绘制逐渐减小的波浪射线或复杂图形
【发布时间】：2012-04-30 16:37:48
【问题描述】：

我正在尝试生成一些太阳“光线”，我可以将其最好地描述为看起来像一把刀的刀片，例如这张照片的刀片部分。

这只是一个例子。我只需要一个可以闭合和填充的带有两三个波浪的三角形。

更好的是，是否有一些 HTML5 应用程序可以用来绘制复杂的图形，然后导出 javascript（moveTo、arcTo、bezierCurveTo、quadraticCurveTo、...）。类似于HTML5 Bezier Sketcher 的东西，但它保存了javascript。尝试盲目地绘制复杂的图形非常困难，如果没有必要，我不想切换到 SVG。

谢谢 1,000,000

编辑：我现在还查看了this site 的所有选项。 None 将允许我绘制和填充简单曲线，然后查看/保存画布命令。所有显示命令都显示在新库中，如 fabric 或 jsDraw2D。

【问题讨论】：

标签： html bezier curve

【解决方案1】：

您可以使用 fabric.js 将 SVG 解析为 html5 画布。这可能对你有用。

https://github.com/kangax/fabric.js

除了 SVG，它还可以为您提供一个不错的画布绘图 API。

【讨论】：

如果我使用fabric.js，创建SVG对象并将它们解析为fabric对象，然后使用fabric重做我的动画，那么这可能会实现我的目标。我确实喜欢导入 SVG 矢量的概念，但是仅仅为了替换十个或十二个画布 curveTo 命令就需要大量的工作和学习曲线。这同样适用于拉斐尔。这很好，但是仅仅因为我无法绘制出波浪线的二次方程而添加一个巨大的库似乎就像一把大象枪。我需要查看/绘制相当简单的形状并获得 lineTo、curveTo 等...
我明白你的意思...可能无法逃避一些数学运算，可能是多项式方程与正弦波的乘法。
我也刚看到这个问题，我想在搜索中添加“解析”：stackoverflow.com/questions/204431/…。不幸的是，它并没有让我更接近。谢谢。

【解决方案2】：

我在Convert SVG to Canvas friendly output 的解决方案中找到了答案。作者不认为它对他有用，但我认为它和我所见过的一样完美。

Cloud 教授（……太棒了！这不是他做的第一件事，我发现这非常有用。）创建了一个站点来获取 SVG 输入和产品 Canvas 输出。你可以看到它here, at Professor Cloud SVG-to-Canvas。

使用这个网站，我可以在 AI 中绘制一些东西，甚至可以拍摄股票矢量图像，导出为 SVG，剪切命令并将它们传递给 Clouds 教授惊人的 SVG-chipper，并获取 Canvas 代码。我知道它不支持完整的 SVG 功能，但是 Canvas 也不支持。非常适合我。

【讨论】：

【解决方案3】：

您的解决方案可能是最好的，但只是为了记录，我尝试了一些图表绘制，并得到了一些不错的结果：方程式是：

sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10

您可以使用以下方式绘制它们：http://www.graphsketch.com/

【讨论】：