二次贝塞尔曲线
var canvas = document.querySelector("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0); //起始点
ctx.quadraticCurveTo(0,500,500,500); // 参考点 结束点
ctx.moveTo(0,0);
ctx.quadraticCurveTo(500,0,500,500);
ctx.moveTo(0,500);
ctx.quadraticCurveTo(0,0,500,0);
ctx.moveTo(0,500);
ctx.quadraticCurveTo(500,500,500,0);
ctx.stroke();
}
二次贝塞尔曲线效果
三次贝塞尔曲线
var canvas = document.querySelector("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0); //起始点
ctx.bezierCurveTo(0,500,500,0,500,500); // 参考点 参考点 结束点 参考点在哪里曲线就往哪里凸
ctx.moveTo(0,0);
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.moveTo(0,500);
ctx.bezierCurveTo(0,0,500,500,500,0);
ctx.moveTo(0,500);
ctx.bezierCurveTo(500,500,0,0,500,0);
ctx.stroke();
}
三次贝塞尔曲线效果
