Skip to content

Instantly share code, notes, and snippets.

@aya-eiya

aya-eiya/meter_sample.html

Created January 21, 2013 12:21
Show Gist options
  • Save aya-eiya/4585683 to your computer and use it in GitHub Desktop.
Save aya-eiya/4585683 to your computer and use it in GitHub Desktop.
Download ZIP
Canvasを使用したメーター表示のサンプル ref: http://qiita.com/items/add9d658add7f6307b1c
Raw
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>
Raw
meter_sample.js
// (c) aya_eiya - 2013
(function (){
this.setMeter = function(_id,size,imageSrc,percent){
var margin = size * 0.1;
var canvas = document.createElement('canvas');
canvas.width = size + margin * 2;
canvas.height = size + margin * 2;
var context = canvas.getContext("2d");
var meterDiv = document.getElementById(_id);
meterDiv.appendChild(canvas);
var image = new Image();
image.onload = function(){
var transparent = "rgba(0,0,0,0)";
var meterColor = "rgb(255,128,128)";
var meterWidth = 16;
var aspect = this.width/this.height;
var digs = {0:0,90:Math.PI/2,180:Math.PI,360:Math.PI*2};
var c = context;
var setImageToCercle = function(){
c.strokeStyle = transparent;
c.beginPath();
c.arc(size/2 + margin,size/2 + margin, size/2 - meterWidth,digs[0],digs[360]);
c.stroke();
c.save();
c.clip();
c.drawImage(image,margin,margin,size * aspect,size);
c.restore();
};
var setFrameOfMeter = function(){
c.strokeStyle = meterColor;
c.lineWidth = 2;
c.beginPath();
c.arc(size/2 + margin,size/2 + margin, size/2 - meterWidth,digs[0],digs[360]);
c.stroke();
c.beginPath();
c.arc(size/2 + margin,size/2 + margin, size/2,digs[0],digs[360]);
c.stroke();
}
var setMerterValue = function(){
c.strokeStyle = meterColor;
c.lineWidth = meterWidth;
c.beginPath();
var lDig = -percent/100 * digs[180] + digs[90];
var rDig = percent/100 * digs[180] + digs[90];
c.arc(size/2 + margin,size/2 + margin,size/2 - meterWidth/2, lDig,rDig);
context.stroke();
};
var setTextArea = function(){
var fontSize = size * 0.18;
c.font = fontSize + "px Arial";
var text = percent+"%";
var textSize = c.measureText(text);
var textLeft = size * 0.9;
c.strokeStyle = meterColor;
c.fillStyle = "white";
c.lineWidth = 4;
c.beginPath();
c.save();
c.arc(textLeft,size - fontSize/2,textSize.width/2+5,0,digs[360]);
c.fill();
c.stroke();
c.clip();
c.beginPath();
c.fillStyle = "black";
c.fillText(text,textLeft-textSize.width/2,size-fontSize/8);
c.restore();
};
setImageToCercle();
setFrameOfMeter();
setMerterValue();
setTextArea();
};
image.src = imageSrc;
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment