最近刚学习canvas，自己做了一个太极图。
<!DOCTYPE html>
<html>
<head>
<title>绘制圆形练习</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas" width="500px" height="300px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.translate(canvas.width/2,canvas.height/2);
setInterval(function(){
context.clearRect(0,0,500,300);
context.rotate(Math.PI/180*10);
// 1. 绘制空心圆形
context.beginPath();
context.arc(0,0,100,0,Math.PI*2);
context.closePath();
context.stroke();
// 2. 绘制实心半圆
context.beginPath();
context.arc(0,0,100,Math.PI/2,Math.PI*3/2);
context.closePath();
context.fill();
// 3. 绘制黑色圆形
context.beginPath();
context.arc(0,50,50,0,Math.PI*2);
context.closePath();
context.fill();
// 4. 绘制白色圆形
context.fillStyle = "white";
context.beginPath();
context.arc(0,-50,50,0,Math.PI*2);
context.closePath();
context.fill();
// 5. 绘制一黑一白小圆形
context.beginPath();
context.arc(0,50,20,0,Math.PI*2);
context.closePath();
context.fill();
context.fillStyle = "black";
context.beginPath();
context.arc(0,-50,20,0,Math.PI*2);
context.closePath();
context.fill();
},100);
</script>
</body>
</html>
时间： 2024-10-05 07:12:38