canvas——贝塞尔曲线

最新推荐文章于 2024-08-16 15:33:06 发布

转载最新推荐文章于 2024-08-16 15:33:06 发布 · 669 阅读

文章标签：

#JS canvas #贝塞尔曲线

js 专栏收录该内容

137 篇文章

订阅专栏

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

该文章已生成可运行项目，

<!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>

本文章已经生成可运行项目