二次貝塞爾曲線
var canvas = document.querySelector("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0); //起始點(diǎn)
ctx.quadraticCurveTo(0,500,500,500); // 參考點(diǎn) 結(jié)束點(diǎn)
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); //起始點(diǎn)
ctx.bezierCurveTo(0,500,500,0,500,500); // 參考點(diǎn) 參考點(diǎn) 結(jié)束點(diǎn) 參考點(diǎn)在哪里曲線就往哪里凸
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();
}
三次貝塞爾曲線效果
