canvas绘制曲线

Posted 2021-02-08 ye-hcj

canvas绘制曲线

1. 方法

   quadraticCurveTo(cp1x, cp1y, x, y)              只有一个控制点的贝塞尔曲线（其实就是控制点分别与起始点和结束点连线的公切线）
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)     有两个控制点的贝塞尔曲线

2. quadraticCurveTo

   

   const canvas = document.getElementById(‘canvas‘);
   const ctx = canvas.getContext(‘2d‘);
   
   ctx.beginPath();
   ctx.moveTo(75, 25);
   ctx.quadraticCurveTo(25, 25, 25, 75);
   ctx.quadraticCurveTo(25, 125, 75, 125);
   ctx.quadraticCurveTo(125, 125, 125, 75);
   ctx.quadraticCurveTo(25, 125, 75, 25);
   ctx.stroke();

3. bezierCurveTo

   

   ctx.beginPath();
   ctx.moveTo(75, 25);
   ctx.bezierCurveTo(75, 75, 25, 75, 25, 25);
   ctx.stroke();