Code Snippet…
Simply save this as gauge.htm and then view the page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Resizeable Html5 Canvas Gauge by Mark Castle</title>
<style>
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function () {
// Feel free to put this in a loop if you want.
canvasGauge(0, 1, "myCanvas", "#8dc73f", "#bbbcc0");
setTimeout("canvasGauge(0, 45, 'myCanvas', '#8dc73f', '#bbbcc0');", 2000);
setTimeout("canvasGauge(0, 90, 'myCanvas', '#8dc73f', '#bbbcc0');", 4000);
setTimeout("canvasGauge(0, 135, 'myCanvas', '#8dc73f', '#bbbcc0');", 6000);
setTimeout("canvasGauge(0, 180, 'myCanvas', '#8dc73f', '#bbbcc0');", 8000);
setTimeout("canvasGauge(0, 225, 'myCanvas', '#8dc73f', '#bbbcc0');", 10000);
setTimeout("canvasGauge(0, 270, 'myCanvas', '#8dc73f', '#bbbcc0');", 12000);
setTimeout("canvasGauge(0, 315, 'myCanvas', '#8dc73f', '#bbbcc0');", 14000);
setTimeout("canvasGauge(0, 359, 'myCanvas', '#8dc73f', '#bbbcc0');", 16000);
};
// Simple Resizeable Html5 Canvas Gauge by Mark Castle
// Example Usage: canvasGauge(0, 45, 'myCanvas', '#8dc73f', '#bbbcc0');
// Where: 0=startangle, 45=endangle, CanvasName, forecolour, backcolour)
// Create the Canvas whatever size you want it to be - it works at most sizes.
// © 2012 Mark Castle. All Rights Reserved.
// You may freely copy this code as long as you keep copyright messages intact.
// Please feel free to optimise this - it needs it. Cheers and Enjoy.
// This code snippet has no warranty whatsoever.
// Changes: Version 0.1 - 24/01/2012 Initial Release.
// Changes: Version 0.2 - 20/11/2014 Few minor tweaks and spelling corrections.
function canvasGauge(start, end, canvasname, forecolour, backcolour) {
var canvas = document.getElementById(canvasname);
clearCanvas(canvasname);
if (canvas && canvas.getContext) {
var context = canvas.getContext("2d");
context.beginPath();
var thickness = 5 * (canvas.width) / 100
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var linethickness = (thickness * 1.5);
//First draw the Inner Circle
var radius = (canvas.width / 2) - (thickness * 3);
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = forecolour;
context.fill();
var arcStartAngle = -90; // (degrees) Point that we want to start drawing arc from.
var radius = (canvas.width / 2) - (thickness * 1.5);
if (end >= 1) { // Only draw if angle greater than 2deg
//Now draw the first arc
var startingAngle = (Math.PI / 180) * (arcStartAngle + start); //(Math.PI/180)*degrees)
var endingAngle = (Math.PI / 180) * (arcStartAngle + end - 1); //(Math.PI/180)*degrees)
var counterclockwise = false;
context.beginPath();
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = linethickness;
context.strokeStyle = forecolour; // line color
context.stroke();
}
if (end <= 358) {
//Now close the circle
context.beginPath();
if (end <= 1) {
var startingAngle2 = (Math.PI / 180) * (arcStartAngle); //(Math.PI/180)*degrees) (Special Case for small angles)
} else {
var startingAngle2 = (Math.PI / 180) * (arcStartAngle + end + 1); //(Math.PI/180)*degrees)
}
var endingAngle2 = (Math.PI / 180) * (arcStartAngle + 358); //(Math.PI/180)*degrees)
context.strokeStyle = backcolour; // line color for 'background'
context.arc(centerX, centerY, radius, startingAngle2, endingAngle2, counterclockwise);
context.lineWidth = linethickness;
context.stroke();
context.save();
}
}
}
// Simple function to clear the canvas ready for drawing on it again.
function clearCanvas(canvasname) {
var canvas = document.getElementById(canvasname);
var context = canvas.getContext("2d");
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();
}
</script>
</head>
<body>
<header><h1>Simple Resizeable Html5 Canvas Gauge by Mark Castle</h1></header>
<nav></nav>
<section>
<p>Written by Mark Castle. © 2012 Mark Castle. All Rights Reserved.</p>
<p>Feel free to use it, reuse it and generally do whatever you like with it. Please bear in mind this is very "rough and ready". All I ask is that you keep the original copyright message intact in the script - thanks - Mark</p>
<p>View Source for the script. To resize it, just change the width and height of the canvas. Cheers - Mark</p>
<p>Wishlist: Need to add some numbers in the middle.</p>
<canvas id="myCanvas" width="400" height="400"/>
</section>
<footer>Hosted by <a href="http://markcastle.com">markcastle.com</a></footer>
</body>
</html>
|
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Resizeable Html5 Canvas Gauge by Mark Castle</title>
<style>
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function () {
// Feel free to put this in a loop if you want.
canvasGauge(0, 1, "myCanvas", "#8dc73f", "#bbbcc0");
setTimeout("canvasGauge(0, 45, 'myCanvas', '#8dc73f', '#bbbcc0');", 2000);
setTimeout("canvasGauge(0, 90, 'myCanvas', '#8dc73f', '#bbbcc0');", 4000);
setTimeout("canvasGauge(0, 135, 'myCanvas', '#8dc73f', '#bbbcc0');", 6000);
setTimeout("canvasGauge(0, 180, 'myCanvas', '#8dc73f', '#bbbcc0');", 8000);
setTimeout("canvasGauge(0, 225, 'myCanvas', '#8dc73f', '#bbbcc0');", 10000);
setTimeout("canvasGauge(0, 270, 'myCanvas', '#8dc73f', '#bbbcc0');", 12000);
setTimeout("canvasGauge(0, 315, 'myCanvas', '#8dc73f', '#bbbcc0');", 14000);
setTimeout("canvasGauge(0, 359, 'myCanvas', '#8dc73f', '#bbbcc0');", 16000);
};
// Simple Resizeable Html5 Canvas Gauge by Mark Castle
// Example Usage: canvasGauge(0, 45, 'myCanvas', '#8dc73f', '#bbbcc0');
// Where: 0=startangle, 45=endangle, CanvasName, forecolour, backcolour)
// Create the Canvas whatever size you want it to be - it works at most sizes.
// © 2012 Mark Castle. All Rights Reserved.
// You may freely copy this code as long as you keep copyright messages intact.
// Please feel free to optimise this - it needs it. Cheers and Enjoy.
// This code snippet has no warranty whatsoever.
// Changes: Version 0.1 - 24/01/2012 Initial Release.
// Changes: Version 0.2 - 20/11/2014 Few minor tweaks and spelling corrections.
function canvasGauge(start, end, canvasname, forecolour, backcolour) {
var canvas = document.getElementById(canvasname);
clearCanvas(canvasname);
if (canvas && canvas.getContext) {
var context = canvas.getContext("2d");
context.beginPath();
var thickness = 5 * (canvas.width) / 100
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var linethickness = (thickness * 1.5);
//First draw the Inner Circle
var radius = (canvas.width / 2) - (thickness * 3);
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = forecolour;
context.fill();
var arcStartAngle = -90; // (degrees) Point that we want to start drawing arc from.
var radius = (canvas.width / 2) - (thickness * 1.5);
if (end >= 1) { // Only draw if angle greater than 2deg
//Now draw the first arc
var startingAngle = (Math.PI / 180) * (arcStartAngle + start); //(Math.PI/180)*degrees)
var endingAngle = (Math.PI / 180) * (arcStartAngle + end - 1); //(Math.PI/180)*degrees)
var counterclockwise = false;
context.beginPath();
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = linethickness;
context.strokeStyle = forecolour; // line color
context.stroke();
}
if (end <= 358) {
//Now close the circle
context.beginPath();
if (end <= 1) {
var startingAngle2 = (Math.PI / 180) * (arcStartAngle); //(Math.PI/180)*degrees) (Special Case for small angles)
} else {
var startingAngle2 = (Math.PI / 180) * (arcStartAngle + end + 1); //(Math.PI/180)*degrees)
}
var endingAngle2 = (Math.PI / 180) * (arcStartAngle + 358); //(Math.PI/180)*degrees)
context.strokeStyle = backcolour; // line color for 'background'
context.arc(centerX, centerY, radius, startingAngle2, endingAngle2, counterclockwise);
context.lineWidth = linethickness;
context.stroke();
context.save();
}
}
}
// Simple function to clear the canvas ready for drawing on it again.
function clearCanvas(canvasname) {
var canvas = document.getElementById(canvasname);
var context = canvas.getContext("2d");
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();
}
</script>
</head>
<body>
<header><h1>Simple Resizeable Html5 Canvas Gauge by Mark Castle</h1></header>
<nav></nav>
<section>
<p>Written by Mark Castle. © 2012 Mark Castle. All Rights Reserved.</p>
<p>Feel free to use it, reuse it and generally do whatever you like with it. Please bear in mind this is very "rough and ready". All I ask is that you keep the original copyright message intact in the script - thanks - Mark</p>
<p>View Source for the script. To resize it, just change the width and height of the canvas. Cheers - Mark</p>
<p>Wishlist: Need to add some numbers in the middle.</p>
<canvas id="myCanvas" width="400" height="400"/>
</section>
<footer>Hosted by <a href="http://markcastle.com">markcastle.com</a></footer>
</body>
</html>