方法：
context.arc(
centerx //圆心x轴坐标
,centery //圆心y轴坐标
,radius //半径
,startingAngle, //起始角度 (单位:π)
,endingAngle //结束角度 (单位:π)
,anticlockwise=false //默认顺时针
)
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id='canvas' style="border: 1px solid #aaa;display: block;margin: 5px;">
</canvas>
<script>
window.onload=function() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
if(canvas){
canvas.width=1024;
canvas.height=768;
context.lineWidth=5
context.fillStyle="#000"
//以(300,300)为圆心,200为半径,起始角度为0处开始顺时针转1.5π进行绘制
context.arc(300,300,200,0,1.5*Math.PI)
context.stroke()
}else{
alert("当前浏览器存在兼容性问题")
}
}
</script>
</body>
</html>
运行结果
image.png
网友评论