如何在 JavaScript 中绘制波浪线

How do I draw wavy lines in JavaScript?

本文关键字:绘制 JavaScript      更新时间:2023-09-26

是否可以在JavaScript中或使用JavaScript库绘制一组波浪线?我的问题有点类似于这个问题,但我必须使用JavaScript而不是Objective-C。

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

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

但我希望这些线产生随机曲线,使它们彼此重叠,而不是直线。

您可以使用带有

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