html5 canvas 倒计时,html5 canvas 倒计时

Canvas

var currentSeconds = 10;

var countDownSeconds = 10;

var interval_id = setInterval("drawDoubleCircle()", 1000);

function drawDoubleCircle() {

if (currentSeconds <= 0) {

clearInterval(interval_id);

}

var canvasElement = document.getElementById('canvas');

var context = canvasElement.getContext('2d');

progress = 360 * currentSeconds / countDownSeconds;

progress_pi = Math.PI * (progress / 180 - 1 / 2);

context.beginPath();

context.moveTo(700, 400);

context.arc(700, 400, 80, 0, Math.PI * 2, false);

context.closePath();

context.fillStyle = '#4BF41B';

context.fill();

context.beginPath();

context.moveTo(700, 400);

context.arc(700, 400, 80, -Math.PI * 1 / 2, progress_pi, false);

context.closePath();

context.fillStyle = 'red'

context.lineCap = 'round';

context.fill();

context.beginPath();

context.arc(700, 400, 65, 0, Math.PI * 2, false);

context.closePath();

context.fillStyle = 'white';

context.fill();

context.font = "bold 40pt Arial";

context.fillStyle = "red";

context.textAlign = "center";

context.textBaseline = 'middle';

context.fillText(currentSeconds, 700, 400);

// 抗锯齿

context.globalCompositeOperation = 'source-atop';

currentSeconds--;

}