Canvasを使用したメーター表示のサンプル #JavaScript

HTML5を使用して、以下の様に画像の周りに丸く囲うようなメーターを表示してみました。

以下コード。

meter_sample.js

// (c) aya_eiya - 2013
(function (){
    this.setMeter = function(_id,_size,imageSrc,_percent){
    var percent = _percent;
    var size = _size;
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    var meterDiv = document.getElementById(_id);
        meterDiv.appendChild(canvas);
    var image = new Image();
    var transparent = "rgba(0,0,0,0)";
    var meterColor = "rgb(255,128,128)";
    var meterWidth = 16;
    var digs = {0:0,90:Math.PI/2,180:Math.PI,360:Math.PI*2};

    var margin = 0;
    var setMargin = function(){
        margin = size * 0.1;
        canvas.width = size + margin * 2;
        canvas.height = size + margin * 2;
    };

    var setFrameOfMeter = function(){
        context.strokeStyle = meterColor;
        context.lineWidth = 2;
        context.beginPath();
        context.arc(size/2 + margin,size/2 + margin, size/2 - meterWidth,digs[0],digs[360]);
        context.stroke();
        context.beginPath();
        context.arc(size/2 + margin,size/2 + margin, size/2,digs[0],digs[360]);
        context.stroke();
    };

    var setMerterValue = function(){
        context.strokeStyle = meterColor;
        context.lineWidth = meterWidth;
        context.beginPath();
        var lDig = -percent/100 * digs[180] + digs[90];
        var rDig =  percent/100 * digs[180] + digs[90];
        context.arc(size/2 + margin,size/2 + margin,size/2 - meterWidth/2, lDig,rDig);
        context.stroke();
    };

    var setImageToCercle = function(){
        var aspect = image.width/image.height;
        context.strokeStyle = transparent;
        context.beginPath();
        context.arc(size/2 + margin,size/2 + margin, size/2 - meterWidth,digs[0],digs[360]);
        context.stroke();
        context.save();
        context.clip();
        context.drawImage(image,margin,margin,size * aspect,size);
        context.restore();
    };

    var setTextArea = function(){
        var fontSize = size * 0.18;
        context.font = fontSize + "px Arial";
        var text = percent+"%";
        var textSize = context.measureText(text);
        var textLeft = size * 0.9;
        context.strokeStyle = meterColor;
        context.fillStyle = "white";
        context.lineWidth = 4;
        context.beginPath();
        context.save();
        context.arc(textLeft,size - fontSize/2,textSize.width/2+5,0,digs[360]);
        context.fill();
        context.stroke();
        context.clip();
        context.beginPath();
        context.fillStyle = "black";
        context.fillText(text,textLeft-textSize.width/2,size-fontSize/8);
        context.restore();
    };

    var ready = false;

    var setUp = function(){
        setMargin();
        setImageToCercle();
        setFrameOfMeter();
        setMerterValue();
        setTextArea();
        ready = true;
    };

    image.onload = setUp;
    var setImage = function(imageSrc){
        ready = false;
        image.src = imageSrc;
    };
    var setPercentage = function(_percent){
        percent = _percent;
        if(ready) setUp();
    };

    var setSize = function(_size){
        console.log(_size);
        size = _size;
        if(ready) setUp();
    };

    setImage(imageSrc);

    return {setSize:setSize,setImage:setImage,setPercentage:setPercentage};
    };
})();

meter_sample.html

<html>
<head>
<title>サンプル</title>
<script src="./meter.js"></script>
</head>
<body>
<p>180pxくらいの大きさで80%のメーターを表示する。</p>
<div id="meter"></div>
<script>
    var _id = 'meter';
    var size = 180;
    var percent = 80;
    var imageSrc = 'https://www.dropbox.com/s/0o3qka5gh2fg5hq/Geesugitan_face.png?dl=1';
    setMeter(_id,size,imageSrc,percent);
</script>
</body>
</html>

GitHubに使用例を上げました。
https://github.com/aya-eiya/html5meter_sample