一、基础使用canvas的画圆和画弧度api
<canvas id="cavasOne" width="300" height="300" style="border: 1px solid red;"></canvas> <script> var cavans = document.querySelector('#cavasOne'); var ctx = cavans.getContext('2d'); //绘制圆 ctx.beginPath(); ctx.lineTo(150, 150); ctx.arc(150, 150, 100, 0, Math.PI * 2); ctx.fillStyle = '#ddd'; ctx.fill(); ctx.closePath(); //绘制扇形 指定百分比 25% ctx.beginPath(); ctx.lineTo(150, 150); ctx.arc(150, 150, 100, -90 * Math.PI / 180, 0); ctx.fillStyle = 'red'; ctx.fill(); ctx.closePath(); </script>
二、使用动画执行绘画操作
<canvas id="cavasOne" width="300" height="300" style="border: 1px solid red;"></canvas> <script> var cavans = document.querySelector('#cavasOne'); var ctx = cavans.getContext('2d'); function drawAngle(angle) { ctx.clearRect(0, 0, cavans.width, -cavans.height); //绘制圆 ctx.beginPath(); ctx.lineTo(150, 150); ctx.arc(150, 150, 100, 0, Math.PI * 2); ctx.fillStyle = '#ddd'; ctx.fill(); ctx.closePath(); //绘制扇形 指定百分比 25% ctx.beginPath(); ctx.lineTo(150, 150); ctx.arc(150, 150, 100, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180); ctx.fillStyle = 'red'; ctx.fill(); ctx.closePath(); //清空中心 ctx.beginPath(); ctx.lineTo(150, 150); ctx.arc(150, 150, 90, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); ctx.closePath(); } //动画执行处理 var num = 0; var angle = 135; function step() { num++; drawAngle(num); if (num < angle) window.requestAnimationFrame(step); } window.requestAnimationFrame(step); </script>
更多: