Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

以下コード。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away