在 HTML5 Canvas 中绘制曲线

Question

我想在 HTML5 canvas 中画一条像 this mentioned here 这样的曲线。有人可以指出我应该使用什么方法吗？

Answer 1

嗯，这看起来大致像 -sin，所以你可以这样做：

let cnvs = document.getElementById('cnvs')
let ctx = cnvs.getContext('2d');
ctx.beginPath();
for (let i = 0; i < cnvs.width; i++){
    ctx.lineTo(i, cnvs.height/2-Math.sin(i*(Math.PI/180))*50);
}
ctx.stroke()

<canvas id='cnvs'></canvas>

所以他们的想法是将曲线表示为 x 的某个函数（这里是 -sin(x)），然后使用渲染上下文的 lineTo 方法在不同的对象之间绘制线条该曲线上的点。只要你每隔几个像素递增一次（这里 1 就已经很好了），那么你就会得到一个漂亮的平滑图形的效果。

Answer 2

另一种方法是使用 the method bezierCurveTo

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 536;
let ch = canvas.height = 100;
   
ctx.beginPath();
ctx.moveTo(0,28)
ctx.bezierCurveTo(0,28,31,7,70,8);
ctx.bezierCurveTo(109,9,313,99,425,90);
ctx.bezierCurveTo(516,82.5,536,55,536,55);
ctx.stroke();

canvas{border:1px solid #d9d9d9;}

<canvas></canvas>

在 HTML5 Canvas 中绘制曲线

Curved line draw in HTML5 Canvas

javascript

line

html5-canvas