CodePen Embed - 贝塞尔曲线

<canvas id="canvas" height="200" width="200px"></canvas>

#canvas {
  border: 1px solid #ccc;
}

const canvas = document.getElementById("canvas");
const cxt = canvas.getContext("2d");

// 二次贝塞尔曲线
cxt.beginPath();
cxt.moveTo(75, 25);
cxt.quadraticCurveTo(67, 45, 105, 90);
cxt.stroke();

// 三次贝塞尔曲线
cxt.beginPath();
cxt.moveTo(100, 100);
cxt.bezierCurveTo(67, 45, 75, 90, 100, 130);
cxt.fill()

This Pen is owned by 小小舒 on CodePen.

See more by @shuliqi on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.