html5 canvas繪制環形進度條，環形漸變色儀表圖
在繪制圓環前，我們需要知道canvas arc() 方法。
一：繪制環形進度條
您的浏覽器不支援canvas标簽。
var pper=0;
var pper_interal;
var dushu=document.getElementById('dushu');
var aaa=drawCanvanPercent('myCanvas1','rem',2,'#93BF55',0.2,'#fff', dushu);
function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color,dushu_ele){
if(dw=="rem"){
cir_r=cir_r*($(".charts").width()/5);
line_w=line_w*(window.screen.width/5);
}
var canvas = document.getElementById(ele_id);
var circle = {
r : cir_r/2, //圓的半徑
per : canvas.getAttribute('data-percent'), //百分比分子
color : cir_color, //圓環的顔色
lineWidth : line_w //圓環的寬度
};
canvas.width=canvas.height=circle.r*2;
canvas.style.borderRadius="50%";
if(canvas.getContext){
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle = fill_color;
ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, 0, Math.PI*2, false);
ctx2.fill();
var ctx = canvas.getContext("2d");
pper_interal= setInterval(function () { //間隔10ms調用一次drawmove
drawMove(ctx,circle,dushu_ele);
}, 10);
var ctx3 = canvas.getContext("2d"); //繪制底色為灰色的圓圈
ctx3.beginPath();
ctx3.strokeStyle = "#ddd";
ctx3.lineWidth=circle.lineWidth;
ctx3.arc(circle.r, circle.r, circle.r, Math.PI*0, Math.PI*2, false);
ctx3.stroke();
}
}
function drawMove(ctx,circle,dushu_ele){ //根據data-percent的值，實作遞進效果
if(pper>=circle.per){
pper=circle.per;
clearTimeout(pper_interal);
}else{
pper++;
}
dushu_ele.innerText=pper+'%';
ctx.beginPath();
ctx.strokeStyle = circle.color;
ctx.lineWidth=circle.lineWidth;
ctx.arc(circle.r, circle.r, circle.r, 0, Math.PI*(pper/100)*360/180, false);
ctx.stroke();
}
二：繪制環形漸變色儀圖：
您的浏覽器不支援canvas标簽。
var pper=0;
var pper_interal;
var dushu=document.getElementById('dushu');
var aaa=drawCanvanPercent('myCanvas1','rem',2,'#93BF55',0.2,'#fff', dushu);
function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color,dushu_ele){
if(dw=="rem"){
cir_r=cir_r*($(".charts").width()/5);
line_w=line_w*(window.screen.width/5);
}
var canvas = document.getElementById(ele_id);
var circle = {
r : cir_r/2.5, //圓的半徑
r2 : cir_r/2,
per : canvas.getAttribute('data-percent'), //百分比分子
color : cir_color, //圓的顔色
lineWidth : line_w //圓的顔色
};
canvas.width=canvas.height=circle.r*2;
canvas.style.borderRadius="50%";
if(canvas.getContext){
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle = fill_color;
ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, Math.PI*0, Math.PI*2, true);
ctx2.fill();
var ctx = canvas.getContext("2d");
pper_interal= setInterval(function () {
drawMove(ctx,circle,dushu_ele);
}, 10);
var ctx3 = canvas.getContext("2d");
ctx3.beginPath();
ctx3.strokeStyle = "#ddd";
ctx3.lineWidth=circle.lineWidth;
ctx3.arc(circle.r, circle.r, circle.r, Math.PI*0.15, Math.PI*0.85, true); //以逆時針的方式，從0.15PI的位置畫到0.85PI。總角度為234度
ctx3.stroke();
}
}
function drawMove(ctx,circle,dushu_ele){
if(pper>=circle.per){
pper=circle.per;
clearTimeout(pper_interal);
}else{
pper++;
}
dushu_ele.innerText=pper+'%';
ctx.beginPath();
var g = ctx.createLinearGradient(0,0,180,0); //建立漸變對象 漸變開始點和漸變結束點
g.addColorStop(0, '#A9D25B'); //添加顔色點
g.addColorStop(1, '#FA5A2D'); //添加顔色點
ctx.strokeStyle = g; //使用漸變對象作為圓環的顔色
ctx.lineWidth=circle.lineWidth;
ctx.arc(circle.r, circle.r, circle.r, Math.PI*0.85, Math.PI*((pper/100)*234/180 + 0.85), false); //這裡的儀表盤總度數為234。即(2-0.85)*Math.PI
ctx.stroke();
}
繪制刻度：
function drawTicks(ele,cir_r){
var cir_r=cir_r*($(".charts").width()/5);
var circle = {
r : cir_r/2.5, //圓的半徑 ,
};
var _canvas = document.getElementById(ele);
var context0= _canvas.getContext("2d");
for(var i=7;i<34;i++){
//儲存目前狀态
context0.save();
//刻度粗細
context0.lineWidth=2;
//刻度顔色
context0.strokeStyle="#666"
//設定00點,以畫布中心為00
context0.translate(circle.r,circle.r);
//設定旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180
context0.rotate(i*9*Math.PI/180);
context0.beginPath();
//刻度起始點
context0.moveTo(0,circle.r-15);
//刻度結束點
context0.lineTo(0,circle.r-17);
context0.closePath();
context0.stroke();
//将旋轉後的圖檔傳回原畫布
context0.restore();
}
//利用半徑與半徑與x軸夾角繪制單個刻度
}
drawTicks("myCanvas1",2);