canvas绘制更加复杂的弧线 - Kaiqisan

canvas绘制更加复杂的弧线

这里的弧线不只是圆弧这么简单的东西了。

关键代码

arcTo(x1, y1, x2, y2, r): 绘制圆弧，但这次并不是直接通过写圆弧属性来绘制圆弧了，它从一个起始点(x, y)开始**（使用moveTo或lineTo定义）**，然后连接(x1, y1)然后再使(x1, y1)连接(x2, y2)，现在我们把这三个点分别叫做A,B,C，现在需要试图将一个半径为r的圆与线段AB和BC相切，最后绘制成完整的图形，完整的过程见下图！

quadraticCurveTo(x1, y1, x2, y2): 绘制贝塞尔曲线，特点就是绘制的弧线和定义的起点和终点试图**（使用moveTo或lineTo定义）**相切。它遵循以下公式。

这个公式，我们可以这么理解，P0,P1,P2是三个参考点的坐标，最后通过这个公式计算出来的一个点就是我们想要的贝塞尔曲线上的一个点，然后通过t取不同的值来获取不同的坐标，当t取无限多个值的时候(可把x轴和y轴坐标点分开，然后再求导微分)，就可以将这些无数的点描绘成一条线，这条线就是我们想要的那条贝塞尔曲线。下面的公式也是同理，只是在计算上面会更加复杂。

bezierCurveTo(x1, y1, x2, y2, x3, y3): 有更多参考点的贝塞尔曲线。也是canvas能绘制的最多参考点的贝塞尔曲线。它根据参考点，并试图和定义的起点和终点**（使用moveTo或lineTo定义）**相切。它遵循以下公式。

贝塞尔曲线是应用于二维图形应用程序的数学曲线，需要了解详细情况的可以去百度百科观望一下。

https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin

参考源码

	window.onload = () => {
	    let canvas = document.getElementById('demo')
		let ctx = canvas.getContext('2d')
		ctx.moveTo(50, 50)
		// 五个参数分别为 起点x轴 起点y轴 终点x轴 终点y轴 弧半径
		// 本质就是两个相交的之间然后再做圆弧，然后圆弧和两个线段相切
		ctx.arcTo(200, 50, 200, 200, 170)
		ctx.lineTo(200, 200)
		ctx.font = '25px "幼圆"'
		ctx.fillText('圆弧', 80, 150)
		ctx.stroke()
		ctx.beginPath()
		ctx.moveTo(250, 350)
		// 绘制贝塞尔曲线 四个参数分别为 控制点1的x坐标 控制点1的y坐标 结束点的x坐标 结束点的y坐标
		// 多用于绘制统计表的弧线
		ctx.quadraticCurveTo(400, 370, 450, 450)
		ctx.stroke()
		ctx.beginPath()
		ctx.moveTo(250, 350)
		ctx.lineTo(400, 370)
		ctx.lineTo(450, 450)
		ctx.stroke()
		ctx.beginPath()
		ctx.moveTo(40, 400)
		ctx.bezierCurveTo(50, 300, 120, 500, 250, 400)
		ctx.stroke()
		ctx.beginPath()
		ctx.moveTo(40, 400)
		ctx.lineTo(50, 300)
		ctx.lineTo(250, 400)
		ctx.lineTo(120, 500)
		ctx.stroke()
	}

显示效果

使用方向

贝塞尔曲线多用于画图工具，通过使用多个参考节点绘制弧线，并能够精确地给出路径，这比人直接用手画要好得多！

总结

学好数理化，走遍天下我不怕，数学在计算机里是相当重要的学科，如果您想要学习做游戏或者做设计师之类的工作，数学功底的必不可少的。今天的贝塞尔曲线只是最基础的基础。毕竟计算机问题从根源上面追溯，它就会变成一个数学问题。