Canvas贝塞尔曲线和二次贝塞尔曲线
程序员文章站
2022-07-12 22:55:02
...
贝塞尔曲线和二次曲线
贝塞尔曲线大概就是ps中钢笔工具那个曲线
quadraticCurveTo(cp1x, cp1y, x, y)
从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x，并y使用由指定的控制点cp1x和cp1y。
例子：
此示例显示了如何绘制二次贝塞尔曲线。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="application/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();
// 起点和终点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); //起始点
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // 终点
ctx.fill();
// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();
</script>
</html>
效果图：
二次贝塞尔曲线
语法：
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
cp1x
第一个控制点的x轴坐标。
cp1y
第一个控制点的y轴坐标。
cp2x
第二个控制点的x轴坐标。
cp2y
第二个控制点的y轴坐标。
x
终点的x轴坐标。
y
终点的y轴坐标。
案例：
绘制一个三次贝塞尔曲线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="application/javascript">
//定义画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 将点定义为{x，y}
let start = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let end = { x: 250, y: 100 };
// 三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();
// 起始点和终止点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI); // 起始点
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI); // 终止点
ctx.fill();
// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // 控制点一
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // 控制点二
ctx.fill();
</script>
</html>
效果图：
案例二：
渲染语音气球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 二次贝塞尔曲线案例
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
}
}
</script>
</html>
效果图：