canvas绘制圆形
程序员文章站
2022-05-30 09:26:41
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制圆形</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,500,500);
for(var i=0;i<10;i++){
context.beginPath();//开始绘制路径
//context.arc（x,y,radius,starAngle,anticlockwise）
//x为绘制圆形起点横坐标，y为绘制圆形起点的纵坐标，radius圆半径，starAngle开始角度，endAngle结束角度，
//anticlockwise是否按顺时针绘制
context.arc(i*30,i*30,i*10,0,Math.PI*2,true);//Math.PI为180°，Math.PI*2表示角度为360°
context.closePath();//绘制完成关闭路径
context.fillStyle = "rgba(255,0,0,0.25)";//绘制样式，图形颜色
context.fill();//调用样式
context.strokeStyle = 'red';//绘制边框样式
context.stroke();//调用样式
}
}
</script>
</body>
</html>