canvas绘制曲线
-
方法
quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 有两个控制点的贝塞尔曲线
-
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();
-
bezierCurveTo
ctx.beginPath(); ctx.moveTo(75, 25); ctx.bezierCurveTo(75, 75, 25, 75, 25, 25); ctx.stroke();