HTML5 Canvas 中的曲线绘制答案

【问题标题】：Curved line draw in HTML5 CanvasHTML5 Canvas 中的曲线绘制
【发布时间】：2019-02-28 05:56:04
【问题描述】：

我想在 HTML5 画布中绘制类似 this mentioned here 的曲线。有人能指出我应该使用什么方法吗？

【问题讨论】：

你试过了吗？
试过 quadraticCurveTo 但似乎只需要某种形状。
bezierCurveTo 怎么样？

【解决方案1】：

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;}

&lt;canvas&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

嗯，这看起来大致像 -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()

&lt;canvas id='cnvs'&gt;&lt;/canvas&gt;

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

【讨论】：