canvas倒计时（原创）

Html

Css

 body {
	margin:0;
	padding:0;
	background:#fff;
}
canvas {
	display:block
}

$(function() {
     var canvas = document.getElementById('canvas');
     var PI = Math.PI;
     var total = 100;
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     var ctx = canvas.getContext('2d');
     ctx.lineWidth = 3;
     ctx.strokeStyle = 'rgba(242,242,242,.8)';
     //紫色圆以及文本
     function draw(index) {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         //底色圆
         ctx.beginPath();
         ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * PI);
         ctx.stroke();
         ctx.save();
         var zhanbi = index / 100 * 2 * PI;
         ctx.translate(canvas.width / 2, canvas.height / 2);
         ctx.beginPath();
         ctx.rotate(-90 * Math.PI / 180);
         ctx.strokeStyle = 'rgba(26,188,156,.8)';
         ctx.arc(0, 0, 100, 0, zhanbi);
         ctx.stroke();
         ctx.rotate(90 * Math.PI / 180);
         ctx.beginPath();
         ctx.font = 'normal 40px Arial';
         ctx.textAlign = 'center';
         ctx.fillStyle = "rgba(58,73,94,.8)";
         ctx.fillText(index, 0, 20);
         ctx.restore();
     }
     var index = 100;
     draw(index);
     setInterval(function() {
         if (index > 0) {
             index--;
             draw(index)
         }
     }, 1000)
 })

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

canvas倒计时（原创）

代码描述：倒计时效果

1

最新

发表评论全部评论

暂时没有评论！

落尽红樱君不见0

2018/5/11 15:34:22

很棒，不过缩圈的时候能够是平滑的而不是一顿一顿的就更好了
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

流年里的时光ZY

相关代码

canvas倒计时（原创）

最新