使用 HTML Canvas 绘制贝塞尔曲线

htmlweb developmentfront end technology更新于 2024/1/23 8:44:17

要绘制贝塞尔曲线，请在 HTML 中使用 BezierCurveTo() 方法。我们先来看一下语法 −

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

这里

cp1x − 表示第一个贝塞尔控制点的 x 坐标
cp1y − 表示第一个贝塞尔控制点的 y 坐标
cp2x − 表示第二个贝塞尔控制点的 x 坐标
cp2y −表示第二个 Bexier 控制点的 y 坐标
x − 表示结束点的 x 坐标
y − 表示结束点的 y 坐标

以下是示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "550" height = "300" style = "border −2px solid blue;"></canvas>
<script>
   var c = document.getElementById('newCanvas');
   var ctx = c.getContext('2d');
   ctx.beginPath();
   ctx.moveTo(50, 20);
   ctx.bezierCurveTo(100, 150, 200, 100, 200, 50);
   ctx.stroke();
</script>
</body>
</html>