使用canvas绘制圆形与弧度转换-CSDN博客

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119109344

这篇博客介绍了如何在canvas上绘制圆形，包括arc()方法的使用，详细解释了参数的意义，如圆心坐标、半径、起始角度和结束角度。同时，提到了角度与弧度的转换公式：radians(弧度) = (deg * Math.PI / 180)。此外，还提及了arcTo()方法，用于根据控制点和半径画圆弧。

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

角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。

canvas绘制圆形

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，
按照anticlockwise给定的方向（默认为顺时针）来生成。
ture：逆时针
false: 顺时针

	x,y为绘制圆弧所在圆上的圆心坐标
	radius为半径
	startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准
	参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(100,100);
				ctx.arc(100,100,50,315*Math.PI/180,45*Math.PI/180,true);
				ctx.closePath();
				ctx.stroke();
			}
		}
		
		
	</script>
</html>

arcTo

arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧
不一定经过(x1 y1),(x2 y2);这两个控制点只是控制一个方向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(200,200);
				ctx.stroke();
				
				
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.arcTo(300,0,200,200,50);
				ctx.stroke();
			}
		}
		
		
	</script>
</html>