canvas基础与简单图形绘制（2）

最新推荐文章于 2024-07-25 11:52:08 发布

youthhhhh

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量392

点赞数 1

文章标签： canvas js html css

本文链接：https://blog.csdn.net/m0_46190621/article/details/106374082

版权

canvas基础与简单图形绘制（2）

在canvas基础与简单图形绘制（1）里面学习了如何画直线，接下来就学习如何画圆，圆形在开发中应用的非常广泛，学会了画圆，我们就可以制作关于动画，像泡沫一样的效果
在这里插入图片描述

1.1画圆的语法

context.arc(ceterx,centery,radius,
startingAngle,endingAngle,
anticlockwise=false
)
其中ceterx,centery是圆心的坐标，radius是半径，startingAngle,endingAngle分别是起始与结束的弧度值（0，0.5π，π，，，）anticlockwise=false是顺时针画圆
在这里插入图片描述

1.2具体应用

注意π的表达，Math.PI就表示π。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.onload = function () {
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext('2d');
			context.arc(200,200,100,0,1.5*Math.PI);
			context.stroke();
		}
	</script>
</head>

<body style="background-color: rgba(0, 183, 255, 0.199);">
	<canvas id="canvas" width="400" height="400" style="border:1px solid red;"></canvas>
</body>

</html>

context.arc(200,200,100,0,1.5*Math.PI) 的效果如下图显示

在这里插入图片描述

多个圆的绘制,可以运用for循环实现，biginPath() 开始一条新的路径，

for(var i=0;i<10;i++){
			
				context.beginPath();
				context.arc(10+i*40,200,10,0,2*Math.PI*(i+1)/10);
				context.stroke();
			}

在这里插入图片描述

youthhhhh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas基础与简单图形绘制（2）

canvas基础与简单图形绘制（2）在canvas基础与简单图形绘制（1）里面学习了如何画直线，接下来就学习如何画圆，圆形在开发中应用的非常广泛，学会了画圆，我们就可以制作关于动画，像泡沫一样的效果
复制链接

扫一扫