首页js使用canvas画出S型曲线

js使用canvas画出S型曲线

时间: 2023-12-03 10:02:04 浏览: 100

好的，下面是使用 canvas 绘制 S 字形曲线的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas S曲线</title> </head> <body> <canvas id="myCanvas" width="500" height="300"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(100, 150); ctx.bezierCurveTo(100, 50, 400, 250, 400, 150); ctx.stroke(); </script> </body> </html> ``` 这里我们使用 `bezierCurveTo()` 方法绘制贝塞尔曲线，通过控制点的位置可以画出 S 字形曲线。具体来说，我们先使用 `moveTo()` 方法将画笔移动到起始点 `(100, 150)`，然后使用 `bezierCurveTo()` 方法指定两个控制点和终点，分别为 `(100, 50)`、`(400, 250)` 和 `(400, 150)`。最后使用 `stroke()` 方法绘制出曲线。以上代码在浏览器中运行后应该可以看到画出了一个 S 字形曲线。

阅读全文