canvas——贝塞尔曲线

最新推荐文章于 2023-12-03 02:45:00 发布

spfLinux

最新推荐文章于 2023-12-03 02:45:00 发布

阅读量560

点赞数

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

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

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

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas——贝塞尔曲线

Document canvas{ background: #ddd; } 您的浏览器版本太低，请升级！ //贝塞尔曲线 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); ctx.beginPath(); ctx.moveTo(20,170); //
复制链接

扫一扫