基础内容 来源
- 贝塞尔曲线的锚点是终止点
- 所有的F点所构成的曲线就是贝塞尔曲线
quadraticCurveTo表示二次贝塞尔曲线的路径，需要传入两个点，第一个是曲线的控制点，另外一个是锚点。
实例样式
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性属性</title>
<style>
canvas{
border: 1px solid #eee;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
// 感觉上贝塞尔曲线和arcTo应该是 一样的
// 利用二次贝塞尔曲线绘制
ctx.beginPath()
ctx.moveTo(50,50)
ctx.quadraticCurveTo(100,50,100,100)
ctx.stroke()
ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(100,50,5,0,2 * Math.PI,false)
ctx.fill()
ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(100,100,5,0,2 * Math.PI,false)
ctx.fill()
// 利用arcTo来绘制
ctx.beginPath()
ctx.moveTo(200,50)
ctx.arcTo(250,50,250,100,54)
ctx.stroke()
//绘制点
ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(250,50,5,0,2 * Math.PI,false)
ctx.fill()
ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(250,100,5,0,2 * Math.PI,false)
ctx.fill()
</script>
</body>
</html>
感觉上这个二次贝塞尔曲线和arcTo的使用差不多，只不过后者需要多加一个参数圆弧半径
arcTo的相关内容
三次贝塞尔曲线
bezierCurveTo参数是三对坐标，前两对是该曲线的控制点，后一个是锚点
实现样例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性属性</title>
<style>
canvas{
border: 1px solid #eee;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(50,50)
ctx.bezierCurveTo(100,75,50,100,100,150)
ctx.stroke()
ctx.fillStyle = 'red'
ctx.beginPath()
ctx.arc(100,75,5,0,Math.PI * 2,false)
ctx.fill()
ctx.beginPath()
ctx.arc(50,100,5,0,Math.PI * 2,false)
ctx.fill()
ctx.beginPath()
ctx.arc(100,150,5,0,Math.PI * 2,false)
ctx.fill()
</script>
</body>
</html>
三次与二次贝塞尔曲线之间的区别 二次贝塞尔曲线都是二维的，他们所构建的曲线只能朝一个方向弯曲，三次贝塞尔曲线是可以在两个方向来进行弯曲的
