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