首页 > 代码库 > canvas 画圆饼动画 countdown 倒计时
canvas 画圆饼动画 countdown 倒计时
<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #666"></canvas>
var canvas = document.getElementById("myCanvas"), ctx = canvas.getContext("2d"), width = canvas.width, height = canvas.height function drawArc(s, e) { var x = width / 2, // center x y = height / 2, // center y radius = 100, counterClockwise = false; ctx.fillStyle = ‘#0e6000‘; ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, radius, s, e, counterClockwise); ctx.fill(); } var step = 1, //相当于是1弧度 = 180°/π; startAngle = 0, endAngle = 0; var animation_interval = 1000, n = 10; // count of arc 把圆拆分为多少块来做动画~ var animation = function() { if (step <= n) { endAngle = step * 2 * Math.PI / n; console.log("endAngle",endAngle) drawArc(startAngle, endAngle); console.log("n",n) console.log("step",step) step++; } else { clearInterval(animation); } }; setInterval(animation, animation_interval);
canvas 画圆饼动画 countdown 倒计时
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。