如何在 JavaScript 中绘制波浪线？答案

【问题标题】：How do I draw wavy lines in JavaScript?如何在 JavaScript 中绘制波浪线？
【发布时间】：2013-11-15 20:41:54
【问题描述】：

是否可以在 JavaScript 或使用 JavaScript 库中绘制一组波浪线？我的问题有点similar to this one，但我必须使用 JavaScript 而不是 Objective-C。

为了进一步扩展我的问题，我想画出三行或更多行的序列。

------------------------------
------------------------------
------------------------------

但我希望线条不是笔直，而是产生随机曲线，使它们相互重叠。

【问题讨论】：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
您可以在画布标签上绘图。您需要在旋转/摆动 3 个 Y 值范围时循环 X 轴。请参阅 matt.might.net/articles/… 以获取灵活而简单的修改实现。
作为 Canvas 的替代品，您可以尝试 SVG。

标签： javascript drawing line

【解决方案1】：

您可以使用带有 bezierCurveTo 方法的 html5 画布来完成。虽然它在不支持 html5 的浏览器中不起作用。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,70);
ctx.bezierCurveTo(100,10,150,100,200,20);
ctx.stroke();

JSFiddle：http://jsfiddle.net/PLJ89/

这里是 bezierCurveTo 方法 http://www.w3schools.com/tags/canvas_beziercurveto.asp 的文档

【讨论】：