用canvas畫一個簡單的圓（帶進度條效果）
阿新 • • 發佈：2019-02-20
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>canvas畫圖</title> <link rel="stylesheet" href=""> <style> *{padding: 0; margin: 0; } .circle{width: 300px;height: 300px;position: relative;} canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;} #canvas_1{z-index: 2;position:absolute;left:72px;top:72px; } #canvas_2{z-index: 3; background: transparent;transform:rotate(-90deg); position:absolute;left:72px;top:72px;} #canvas_3{z-index:1} .smallText{ font-size: 14px; z-index: 4; } </style> </head> <body> <div class="circle"> <canvas id="canvas_1" width="154" height="154"></canvas> <span class="smallText">待解決</span> <canvas id="canvas_2" width="154" height="154"></canvas> <canvas id="canvas_3" width="300" height="300"></canvas> </div> <script> function inte(percent){ //獲取畫布 var canvas_1 = document.getElementById("canvas_1"); var canvas_2 = document.getElementById("canvas_2"); var canvas_3 = document.getElementById("canvas_3"); //可以在畫布上進行繪畫，即返回一個物件，該物件可以在畫布上進行操作，可以理解為畫筆 var ctx_1 = canvas_1.getContext('2d'); var ctx_2 = canvas_2.getContext('2d'); var ctx_3 = canvas_3.getContext('2d'); //影象邊框是10畫素 ctx_1.lineWidth = 5; ctx_1.strokeStyle = "#ccc"; //第一個圓的顏色為白色，為底部的白色圓圈 ctx_1.beginPath(); //畫筆1的起始位置 //引數arc(x軸，y軸，半徑，起始角（一般為0），結束角（一般為2*Math.PI）,可選（false為順時針，true為逆時針）) ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false); //建立從當前點回到起始點的路徑 ctx_1.closePath(); //繪製以上定義好的路線 ctx_1.stroke(); if (percent < 0 || percent > 100) { throw new Error('percent must be between 0 and 100'); return } ctx_2.lineWidth = 5; ctx_2.strokeStyle = "#f90"; var angle = 0; var timer; //定義一個自執行函式 (function draw(){ //requestAnimationFrame定義動畫 timer = requestAnimationFrame(draw); //clearRect清空給定矩形內的指定畫素（引數：x軸，y軸，要清除矩形的寬度，要清除矩形的高度） ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height) //百分比圓環 ctx_2.beginPath(); //畫筆2的起始位置 //建立部分圓或圓圈 ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false); angle++; //取整 var percentAge = parseInt((angle / 360) * 100) if (angle > (percent / 100 * 360)) { percentAge = percent window.cancelAnimationFrame(timer); }; ctx_2.stroke(); ctx_2.closePath(); //儲存當前環境狀態 ctx_2.save(); ctx_2.beginPath(); //旋轉當前的繪畫 ctx_2.rotate(90 * Math.PI / 180) ctx_2.font = '30px Arial'; ctx_2.fillStyle = 'red'; var text = percentAge + '%'; //fillText() 方法在畫布上繪製填色的文字。文字的預設顏色是黑色。 //使用上面font 屬性來定義字型和字號，並使用 fillStyle 屬性以另一種顏色/漸變來渲染文字。 ctx_2.fillText(text, 55, -70); ctx_2.closePath(); //返回之前儲存過的路徑狀態和屬性 ctx_2.restore(); ctx_3.lineWidth = 1; ctx_3.strokeStyle = "#000"; ctx_3.beginPath(); ctx_3.arc(canvas_3.width / 2,canvas_3.height / 2,canvas_3.width / 2 -ctx_3.lineWidth / 2,0,Math.PI * 2,false); ctx_3.closePath(); ctx_3.stroke(); })() } window.onload = inte(60); </script> </body> </html>
裡面有詳細註釋哦，下面是效果圖：
