28 绘制圆弧

最新推荐文章于 2024-04-10 18:45:01 发布

丨Anna丨

最新推荐文章于 2024-04-10 18:45:01 发布

阅读量596

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109353417

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

28 绘制圆弧

1 角度与弧度的js表达式

radians=(Math.PI/180)*degrees

2 arc

语法

    arc(x, y, radius, startAngle, endAngle, anticlockwise)
			画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，
			按照anticlockwise给定的方向（默认为顺时针）来生成。
			ture：逆时针
			false:顺时针
		
		x,y为绘制圆弧所在圆上的圆心坐标
		radius为半径
		startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准
		参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

解析

示例

	<head>
		<meta charset="UTF-8">
		<title>07_绘制圆弧</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.arc(100,100,50,0*Math.PI,2*Math.PI);
				ctx.stroke();
			}
		</script>
	</body>

效果

3 arcTo在画布上创建介于两个切线之间的弧

语法

	arcTo(x1, y1, x2, y2, radius)在画布上创建介于两个切线之间的弧/曲线

解析

相当于一个半径为50的圆弧与直线1，直线2两两相切所形成的圆弧

示例

	<head>
		<meta charset="UTF-8">
		<title>07_绘制圆弧</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(150,50);
				ctx.arcTo(200,50,200,100,50);
				ctx.lineTo(200,120);
				ctx.stroke();
			}
		</script>
	</body>

效果