|
Сообщение от cyber
|
|
просто хотел сделать анимацию загрузки таким вот извращенным способом но почему она видет себя так понять не могу.
|
Окей, не уверен, какого ты хотел достичь эффекта, но например вот:
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas { border: 1px solid black; }
</style>
<script>
function progressFn ( canvas ) {
var ctx = canvas.getContext( "2d" );
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var radius = 50;
var clearX = Math.floor( cx - radius );
var clearY = Math.floor( cy - radius );
var clearW = Math.ceil( cx + radius ) - clearX;
var clearH = Math.ceil( cy + radius ) - clearY;
return function ( progress ) {
ctx.clearRect( clearX, clearY, clearW, clearH );
ctx.save();
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "hsl(120, 80%, 25%)";
ctx.moveTo( cx, cy );
ctx.arc( cx, cy, radius, 0, Math.PI * 2 * progress, false );
ctx.fill();
ctx.globalCompositeOperation = "xor";
ctx.font = "bold 20px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText( ( progress * 100 ).toFixed( 0 ) + "%", cx, cy );
ctx.restore();
}
}
window.onload = function () {
var progress = 0;
var progressMax = 100;
var showProgress = progressFn( document.getElementById( "canvas" ) );
var interval = setInterval( function () {
showProgress( progress / progressMax );
if ( ++progress > progressMax ) {
clearInterval( interval );
}
}, 50);
}
</script>
</head>
<body>
<canvas width="200" height="200" id="canvas"></canvas>
</body>
</html>