canvas——贝塞尔曲线

最新推荐文章于 2025-05-07 07:27:16 发布

spfLinux

最新推荐文章于 2025-05-07 07:27:16 发布

阅读量648

点赞数

分类专栏： js 文章标签： JS canvas 贝塞尔曲线

js 专栏收录该内容

137 篇文章

订阅专栏

本文介绍如何使用HTML5的canvas元素绘制二次及三次贝塞尔曲线。通过具体的代码实例展示了贝塞尔曲线的基本概念及其在网页绘图中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		//贝塞尔曲线
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');

		ctx.beginPath();
		ctx.moveTo(20,170);  //起始点
		ctx.lineTo(130,40);  //控制点
		ctx.lineTo(180,150); //终点
		ctx.stroke();

		//二次贝塞尔曲线  一个控制点
		ctx.beginPath();
		ctx.moveTo(20,170);
		ctx.quadraticCurveTo(130,40,180,150);
		ctx.strokeStyle="red";
		ctx.stroke();

	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		//贝塞尔曲线
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');

		ctx.beginPath();
		ctx.moveTo(25,175);  //起始点
		ctx.lineTo(60,80);  //控制点1
		ctx.lineTo(150,20); //控制点2
		ctx.lineTo(170,150); //终点
		ctx.stroke();

		//三次贝塞尔曲线  两个控制点
		ctx.beginPath();
		ctx.moveTo(25,175);
		ctx.bezierCurveTo(60,80,150,20,170,150);
		ctx.strokeStyle="red";
		ctx.stroke();

		//推荐链接：
		//http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/
	</script>
</body>
</html>