HTML5绘图基础_09_绘制弧线详解

最新推荐文章于 2024-05-14 22:49:55 发布

一起学习前端吧

最新推荐文章于 2024-05-14 22:49:55 发布

阅读量2.4k

点赞数

分类专栏： HTML5绘图文章标签： HTML5 canvas 弧线绘制

本文链接：https://blog.csdn.net/sweetsoft/article/details/50539462

版权

HTML5绘图专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

参数的定义具体如下：

语法：void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数：

x -- 圆弧中心（圆心）的 x 轴坐标。 y -- 圆弧中心（圆心）的 y 轴坐标。 radius -- 圆弧的半径。 startAngle -- 圆弧的起始点， x轴方向开始计算，单位以弧度表示。 endAngle -- 圆弧的重点，单位以弧度表示。 anticlockwise 可选，默认值为false，即默认为顺时针

可选的 Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

关键点：startAngle与endAngle的值，单位为弧度，弧度如何定义？这是一个数学问题。根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，用图例来表示如下：

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			var c = document.getElementById("c1");
			var context = c.getContext("2d");
			c.width = 600;
			c.height = 600;	
			context.lineWidth = 5;
			context.strokeStyle = "red";
			context.arc(300,300,200,0,1.75*Math.PI);
			context.stroke();
		};
		</script>
		<canvas id="c1" style="border:1px solid red"></canvas>
	</body>
</html>

效果及解析：

该为逆时针方向绘制，代码调整为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			var c = document.getElementById("c1");
			var context = c.getContext("2d");
			c.width = 600;
			c.height = 600;	
			context.lineWidth = 5;
			context.strokeStyle = "red";
			context.arc(300,300,200,0,1.75*Math.PI,true); //调整为逆时针方向绘制，还是从0π到1.75π
			context.stroke();
		};
		</script>
		<canvas id="c1" style="border:1px solid red"></canvas>
	</body>
</html>

效果及解析：

一起学习前端吧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5绘图基础_09_绘制弧线详解

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。参数的定义具体如下：
复制链接

扫一扫