Can be directly copied and pasted to run
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" />
<title>canvas</title>
</head>
<body>
<canvas width="1000" height="1000" id="mycvs">The current browser does not support this control, please replace or update the browser </canvas>
<script type="text/javascript">
var a = document.getElementById("mycvs");
var can = a.getContext("2d");
var beginx = -(1 / 2 * Math. PI);//Start value
var r = 150;
var sidex = 1 * (Math.PI / 180);//Increase value
var endx = beginx + 2 * Math.PI;//End value
var bendx = beginx + 2 * Math.PI;
var aendx = beginx + Math.PI;
var tmx = beginx;//current value
var t = 0;
var rends = function () {
if (tmx + sidex >= endx) {
tmx = beginx;
t = t + 1;
endx = endx - Math.PI;
if (t == 2) {//fill color and exit
can.save();
arcs(300, 300, r, beginx, aendx, true, "black");
arcs(300, 225, 75, beginx, aendx, null,"black");
arcs(300, 375, 75, beginx, aendx, true,"white");
arcs(300, 375, 20, beginx, bendx, null, "black");
arcs(300, 225 , 20, beginx, bendx, null, "white");
return;
}
} else {
tmx += sidex;
}
can.clearRect(0, 0, 1000, 1000);//Using the clearRect() function to make the image clearer also causes the previous stroke to clear after one stroke
can.lineWidth = 5 ;
if (t == 0)
{
can.beginPath();
can.arc(300, 300, r, beginx, tmx);
can.stroke();
} else if (t == 1) {
can.beginPath( );
can.arc(300, 300, r, beginx, bendx);//So here I redraw the outer circle again
can.arc(300, 225, 75, beginx, tmx);
can.arc(300 , 375, 75, beginx, tmx, true);
can.stroke();
}
requestAnimationFrame(rends);//This is the animation control
};
function arcs(x,y,r,begin,end,f,color) {//Center(x,y), radius r, start value begin, end value end, direction f, fill color color
can.beginPath() ;
can.fillStyle = color;
can.arc(x, y, r, begin, end,f);
can.fill();
can.stroke();
}
rends();
</script>
</body>
</html>
This code is a bit redundant. Beginners, please enlighten me. Thank you.