贝塞尔曲线

canvas之贝塞尔曲线

2阶贝塞尔曲线

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();

• https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo

3阶贝塞尔曲线

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

• https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo

N阶贝塞尔曲线

• https://github.com/Aaaaaaaty/bezierMaker.js
• https://zhuanlan.zhihu.com/p/180508343
• https://juejin.cn/post/6844903544181506055

拓展月度

svg: https://juejin.cn/post/7124312346947764260
canvas: https://juejin.cn/post/7119495608938790942