<canvas class="canvas"></canvas>
<div id="btn"></div>
<style>
.canvas{
width: 600px;
height: 300px;
background: #fff;
}
.canvas+#btn{
width: 100px;
height: 50px;
background: red;
}
</style>
<script>
'use strict';
var canvas = document.querySelector('.canvas'),
btn = document.querySelector('.canvas+#btn'),
context = canvas.getContext('2d'),
centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 30;
function getRadians(degrees) {
return (Math.PI/180)*degrees;
}
function foo() {
var degrees = 0;
var setInterval_1 = setInterval( function () {
if(degrees>=360) clearInterval(setInterval_1);
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(centerX, centerY, radius, 0, getRadians(degrees), false);
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
degrees+= 5;
btn.innerHTML = Math.floor(degrees/360*100) + "%";
}, 10);
}
btn.addEventListener("click", foo);
</script>