绘制三次贝塞尔曲线
上一节我们学习了二次贝塞尔曲线,本节我们开始学习三次贝塞尔曲线。贝塞尔曲线都是由起点、终点和多个控制点组成。二次贝塞尔曲线有控制点,三次贝塞尔曲线有两个控制点,n 次贝塞尔曲线就有 n-1 个控制点。
三次贝塞尔曲线是一种三次曲线,它可以向两个方向弯曲,由四个点来定义:两个锚点及两个控制点,控制点用来控制曲线的形状。
我们先看一下三次贝塞尔曲线的绘制过程:
上图中 p1 和 p4 是两个锚点,p2 和 p3 是两个控制点。
在线工具
这里介绍开源的在线画贝塞尔曲线的工具,同学们可以体验一下:
canvas 绘制三次贝塞尔曲线
在 canvas 中,绘制三次贝塞尔曲线和绘制二次贝塞尔曲线类似,只是比二次贝塞尔曲线多了控制点参数,具体绘制为:
ctx.bezierCurveTo(cpx1,1,cpx2,2,x,y);
先看整体案例:
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=
canvas.height=
const ctx = canvas.getContext('2d');
ctx.Style="#456795";
ctx.lineWidth=;
ctx.beginPath();
ctx.moveTo(,);
ctx.bezierCurveTo(,, ,, , ); //了直接绘制椭圆的
ctx.();
//绘制起点
ctx.beginPath();
ctx.arc(,,,,*Math.PI)
ctx.fillStyle= "#888"
ctx.fill()
//绘制控制点1
ctx.beginPath();
ctx.arc(,,,,*Math.PI)
ctx.fillStyle= "#888"
ctx.fill()
//绘制控制点2
ctx.beginPath();
ctx.arc(,,,,*Math.PI)
ctx.fillStyle= "#888"
ctx.fill()
//绘制终点
ctx.beginPath();
ctx.arc(, ,,,*Math.PI)
ctx.fillStyle= "#888"
ctx.fill()
</script>
</body>
</html>
运行结果:
这样我们就绘制了一条三次贝塞尔曲线。
本小节中我们使用到新的 bezierCurveTo()
。
bezierCurveTo
作用是绘制一条三次贝塞尔曲线。
变量说明:
本小节我们主要学习了利用 bezierCurveTo
绘制一条三次贝塞尔曲线,这个有6个参数,分别是两个控制点和终点的坐标。