canvas製做原生的百分比圓形比例等

時間 2019-12-11

標籤 canvas 製做原生百分比圓形比例简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas製做原生的百分比圓形比例等</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;}
</style>
</head>
<body>
<div class="chart">
    <canvas  id="canvas" width="300" height="300" style="border:1px solid #e5e5e5"></canvas>
</div>
</body>
</html>

<script type="text/javascript">
　window.onload = function(){ 
    var draw = document.getElementById("canvas");
    if(!draw.getContext){
      return false;
    }
    var context=draw.getContext('2d'), centerX=draw.width/2,
        centerY=draw.height/2,
        angle= 0.6, //佔的百分數
        color=[], //"#e5e5e5","red","#F00"
        font="40px Arial";
        speed = 0; //從度數開始50---》表示從50度開始
        context.lineCap="round";  //square 平角的帽

    //繪製外圈的圓
    function blueCircle(){
        context.save();//save() 方法保存當前圖像狀態的一份拷貝。
        context.strokeStyle = color[0] || "#e5e5e5"; //設置描邊樣式
        context.lineWidth = 5; //設置線寬
        context.beginPath();//路徑開始          
        //用於繪製圓弧context.arc(x座標，y座標，半徑，起始角度，終止角度，順時針/逆時針)
        context.arc(centerX,centerY,centerX-5,0,2*Math.PI,false);
        context.stroke();
        context.closePath(); //路徑結束 
        context.restore();//save() 方法把當前狀態的一份拷貝壓入到一個保存圖像狀態的棧中。這就容許您臨時地改變圖像狀態，而後，經過調用 restore() 來恢復之前的值。
    }

     //繪製紅色外圈
    function redCircle(n){
        context.save();
        context.strokeStyle = color[1] || "red"; //設置描邊樣式
        context.lineWidth = 5; //設置線寬
        context.beginPath();
        context.arc(centerX, centerY, centerX-5 ,  -Math.PI /2, (n * 3.6 - 90) * Math.PI / 180, false);
        context.stroke();
        context.closePath();
        context.restore();
    } 
     //百分比文字繪製
    function text(n){
        context.save(); //save和restore能夠保證樣式屬性只運用於該段canvas元素
        context.beginPath();
        context.font =font || "40px Arial"; //設置字體大小和字體
        context.fillStyle=color[2] || "#333";
        context.textAlign='center';//文本程度對齊方法
        context.textBaseline='middle';//文本垂曲標的目的，基線位置
        //繪製字體，而且指定位置
        context.fillText(n.toFixed(0)+"%", centerX, centerY);
        context.stroke(); //執行繪製
        context.closePath();
        context.restore();
    }

    //本身一直調用本身動畫循環
    var timer=null;
    (function drawFrame(){
        timer=setTimeout(drawFrame,10);
        context.clearRect(0, 0, draw.width, draw.height);
        blueCircle();
        redCircle(speed);
        text(speed);
        if(speed >= angle*100){ 
            clearTimeout(timer);
        }
        speed += 0.2;
    }());
}
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。