二次曲线和贝塞尔曲线
截图如下，拖动黄色控制点可以改变曲线：
二次曲线代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var start = { x: 10, y: 150 }, ctl = { x: 100, y: 50 }, end = { x: 200, y: 150 };
var mouseIndex = -1;
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 600, 500);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.beginPath();
//辅助连线
ctx.moveTo(start.x, start.y);
ctx.lineTo(ctl.x, ctl.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
//曲线
ctx.beginPath();
ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 4;
ctx.moveTo(start.x, start.y);
ctx.quadraticCurveTo(ctl.x, ctl.y, end.x, end.y);
ctx.stroke();
//控制点
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.fillStyle = mouseIndex == 0 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.lineWidth = 2;
ctx.arc(start.x, start.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = mouseIndex == 1 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.arc(ctl.x, ctl.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = mouseIndex == 2 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.arc(end.x, end.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
}
function getRect(point) {
return { x: point.x - 8, y: point.y - 8, width: 16, height: 16 };
}
function contains(rect, point) {
return point.x > rect.x && point.x < rect.x + rect.width && point.y > rect.y && point.y < rect.y + rect.height;
}
function handleMove(event) {
if (window.mousedown) {
if (mouseIndex == 0) {
start = { x: event.offsetX, y: event.offsetY };
} else if (mouseIndex == 1) {
ctl = { x: event.offsetX, y: event.offsetY };
} else if (mouseIndex == 2) {
end = { x: event.offsetX, y: event.offsetY };
}
draw();
} else {
var newMouseIndex = mouseIndex;
if (contains(getRect(start), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 0;
} else if (contains(getRect(ctl), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 1;
} else if (contains(getRect(end), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 2;
} else {
newMouseIndex = -1;
}
if (newMouseIndex !== mouseIndex) {
mouseIndex = newMouseIndex;
draw();
}
}
}
</script>
</head>
<body onload="draw()" onmousedown="window.mousedown=1" onmouseup="window.mousedown=0">
<canvas id="canvas" width="600" height="500" onmousemove="handleMove(event)"></canvas>
</body>
</html>
贝塞尔曲线：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var start = { x: 10, y: 150 }, ctl = { x: 100, y: 50 }, ctl2={x:200,y:200},end = { x: 300, y: 150 };
var mouseIndex = -1;
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 600, 500);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.beginPath();
//辅助连线
ctx.moveTo(start.x, start.y);
ctx.lineTo(ctl.x, ctl.y);
ctx.lineTo(ctl2.x, ctl2.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
//曲线
ctx.beginPath();
ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 4;
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(ctl.x, ctl.y, ctl2.x,ctl2.y,end.x, end.y);
ctx.stroke();
//控制点
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.fillStyle = mouseIndex == 0 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.lineWidth = 2;
ctx.arc(start.x, start.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = mouseIndex == 1 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.arc(ctl.x, ctl.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = mouseIndex == 2 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.arc(ctl2.x, ctl2.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = mouseIndex == 3 ? "rgba(250,250,0,1)" : "rgba(210,210,0,1)";
ctx.arc(end.x, end.y, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
}
function getRect(point) {
return { x: point.x - 8, y: point.y - 8, width: 16, height: 16 };
}
function contains(rect, point) {
return point.x > rect.x && point.x < rect.x + rect.width && point.y > rect.y && point.y < rect.y + rect.height;
}
function handleMove(event) {
if (window.mousedown) {
if (mouseIndex == 0) {
start = { x: event.offsetX, y: event.offsetY };
} else if (mouseIndex == 1) {
ctl = { x: event.offsetX, y: event.offsetY };
} else if (mouseIndex == 2) {
ctl2 = { x: event.offsetX, y: event.offsetY };
}else if (mouseIndex == 3) {
end = { x: event.offsetX, y: event.offsetY };
}
draw();
} else {
var newMouseIndex = mouseIndex;
if (contains(getRect(start), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 0;
} else if (contains(getRect(ctl), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 1;
} else if (contains(getRect(ctl2), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 2;
} else if (contains(getRect(end), { x: event.offsetX, y: event.offsetY })) {
newMouseIndex = 3;
}else {
newMouseIndex = -1;
}
if (newMouseIndex !== mouseIndex) {
mouseIndex = newMouseIndex;
draw();
}
}
}
</script>
</head>
<body onload="draw()" onmousedown="window.mousedown=1" onmouseup="window.mousedown=0">
<canvas id="canvas" width="600" height="500" onmousemove="handleMove(event)"></canvas>
</body>
</html>