| |
<!DOCTYPE html> |
| |
<html> |
| |
<head> |
| |
<meta charset="utf-8" /> |
| |
<title></title> |
| |
|
| |
<style type="text/css"> |
| |
#BAgua{ |
| |
width: 300px; |
| |
height: 300px; |
| |
margin: 0 auto; |
| |
text-align: center; |
| |
display: flex; |
| |
justify-content: center; |
| |
align-items: center; |
| |
} |
| |
#mycanvas { |
| |
animation: 2s zhuan infinite linear; |
| |
} |
| |
@keyframes zhuan { |
| |
0% {transform: rotate(0deg);} |
| |
100% {transform: rotate(360deg);} |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="BAgua"> |
| |
<canvas id="mycanvas" width="200" height="200"></canvas> |
| |
</div> |
| |
</body> |
| |
</html> |
| |
<script type="text/javascript"> |
| |
var bag=document.getElementById("mycanvas"); |
| |
var ctx =bag.getContext("2d"); |
| |
|
| |
ctx.beginPath();//开始一条路径 |
| |
ctx.arc(100,100,100,0,Math.PI*2);//绘制原型 |
| |
ctx.stroke(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.arc(100,100,100,Math.PI*0.5,Math.PI*1.5); |
| |
ctx.fillStyle="black"; |
| |
ctx.fill(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.arc(100,50,50,Math.PI*0.5,Math.PI*1.5); |
| |
ctx.stroke(); |
| |
ctx.fillStyle="white"; |
| |
ctx.fill(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.arc(100,150,50,Math.PI*0.5,Math.PI*1.5,true); |
| |
ctx.stroke(); |
| |
ctx.fillStyle="black"; |
| |
ctx.fill(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.arc(100,50,10,0,Math.PI*2); |
| |
ctx.stroke(); |
| |
ctx.fillStyle="black"; |
| |
ctx.fill(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.arc(100,150,10,0,Math.PI*2); |
| |
ctx.stroke(); |
| |
ctx.fillStyle="white"; |
| |
ctx.fill(); |
| |
|
| |
|
| |
</script> |
| |
|