繪制注意 · 前端技術總結

## 一、arc(x, y, r, sAngle, eAngle, anticlockwise) 中的sAngle, eAngle不是角度而是弧度，弧度的計算公式 ~~~ var radian = Math.PI / 180 * angle; ~~~ ![](https://box.kancloud.cn/95ca5c54495835fba13d5d0a62b6055d_163x152.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> *{margin: 0;padding: 0;} </style> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); ctx.lineWidth = 4; // 灰色 ctx.beginPath(); ctx.strokeStyle = '#666'; ctx.arc(100, 100, 50, -Math.PI/180*90, Math.PI/180*270, false); ctx.stroke(); ctx.closePath(); // 紅色 var sAngle = -90, // 開始角度 eAngle = -30; // 結束角度 ctx.beginPath(); ctx.strokeStyle = '#f00'; ctx.arc(100, 100, 50, Math.PI/180*sAngle, Math.PI/180*eAngle, false); ctx.stroke(); ctx.closePath(); </script> </body> </html> ~~~ ## 二、fill()填充路徑時會自動閉合，不需要closePath()，但stroke()不會 ![](https://box.kancloud.cn/9fff24524fae0f56a49a314d334357e2_74x68.jpg) ~~~ ctx.lineWidth = 4; ctx.beginPath(); var startAngle = 0, endAngle = 90; ctx.arc(100, 100, 50, Math.PI/180*startAngle, Math.PI/180*endAngle); ctx.fill(); ~~~ ![](https://box.kancloud.cn/0c3a38b23db802964e2848f9dace483b_76x71.jpg) ~~~ ctx.lineWidth = 4; ctx.beginPath(); var startAngle = 0, endAngle = 90; ctx.arc(100, 100, 50, Math.PI/180*startAngle, Math.PI/180*endAngle); ctx.stroke(); ~~~ 如果路徑沒繪制到起始點而直接closePath()的話，就讓canvas迷茫了 ~~~ ctx.lineWidth = 4; ctx.beginPath(); var startAngle = 0, endAngle = 250; ctx.arc(100, 100, 50, Math.PI/180*startAngle, Math.PI/180*endAngle); ctx.closePath(); ~~~ ![](https://box.kancloud.cn/2aeda0a50c9810b747db1c61b313a691_135x135.jpg)