<!DOCTYPE html>
<html lang="zh-cmn-Hans" id="_hl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
html {
font-size: 100px;
}
@media (min-width: 750px) {
html {
width: 750px;
margin: 0 auto;
}
}
html, body {
height: 100%;
}
body, p {
margin: 0;
}
a {
touch-action: manipulation;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
}
body {
font-size: .32rem;
line-height: 1;
font-family: \5B8B\4F53;
color: #333;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5);
}
canvas {
width: 200px;
height: 200px;
transform: rotate(-90deg);
}
</style>
<script>
_hl.style.fontSize = _hl.offsetWidth / 7.5 + 'px';
</script>
</head>
<body>
<div>
<canvas id="_c"></canvas>
</div>
<script>
function Cvs() {
const ts = this;
ts.s = parseFloat(getComputedStyle(_c, null).width);
ts.c = _c.getContext('2d');
ts.w = ts.s / 2;
ts.t = 0;
_c.width = ts.s;
_c.height = ts.s;
ts.c.fillStyle = '#fff';
ts.r = setInterval(() => {
ts.t += .05;
ts.fill();
ts.t >= 2 && (clearInterval(ts.r), console.log('canvas-end'));
}, 17);
}
Cvs.prototype.fill = function () {
const ts = this;
ts.c.clearRect(0, 0, ts.s, ts.s);
ts.c.beginPath();
ts.c.moveTo(ts.w, ts.w);
ts.c.arc(ts.w, ts.w, ts.w, 0, ts.t * Math.PI);
ts.c.fill();
}
new Cvs();
</script>
</body>
</html>
