canvas基础与简单图形绘制(2)

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();
			}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_46190621/article/details/106374082