Hallo!
Ich starte gerade mit HTML5 und canvas.
Ich möchte einen Bereich, der 150px hoch ist und so breit wie der Browser.
In diesem Bereich möchte ich Unterbereiche machen, die eine oder mehrere Grafik beinhalten und rechts oben in der Grafik eine Circle Progressbar anzeigt.
Es wäre sehr nett wenn mir jemand ein Grundgerüst zeigen kann.
CSS:
Javascript:
HTML:
Die progressbar habe ich von hier:
Circular progress bar (canvas) - JSFiddle
Ich kann zwar ein Bild einfügen, jedoch passend zum Bild soll am rechten oberen Rand die Progressbar erscheinen.
Später soll innerhalb der Progressbar noch ein Bild eingefügt werden.
Wie kann ich also die Progressbar an der richtigen Stelle über der rechten oberen Ecke der Bilder plazieren?
Vielen Dank an alle!
Ich starte gerade mit HTML5 und canvas.
Ich möchte einen Bereich, der 150px hoch ist und so breit wie der Browser.
In diesem Bereich möchte ich Unterbereiche machen, die eine oder mehrere Grafik beinhalten und rechts oben in der Grafik eine Circle Progressbar anzeigt.
Es wäre sehr nett wenn mir jemand ein Grundgerüst zeigen kann.
CSS:
HTML:
div {
position:relative;
margin:0px;
width:110px; height:110px;
}
canvas {
display: block;
position:absolute;
top:0;
left:0;
}
span {
color:#555;
display:block;
line-height:110px;
text-align:center;
width:110px;
font-family:sans-serif;
font-size:20px;
font-weight:100;
margin-left:5px;
}
input {
width: 100px;
}
span {
}Javascript:
Code:
var el = document.getElementById('graph'); // get canvas
var options = {
percent: el.getAttribute('data-percent') || 25,
size: el.getAttribute('data-size') || 110,
lineWidth: el.getAttribute('data-line') || 5,
rotate: el.getAttribute('data-rotate') || 0
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);HTML:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<canvas id="objectGroup" width="100%" height="150" data-percent="88"></canvas>
<script>
</script>
</body>
</html>Die progressbar habe ich von hier:
Circular progress bar (canvas) - JSFiddle
Ich kann zwar ein Bild einfügen, jedoch passend zum Bild soll am rechten oberen Rand die Progressbar erscheinen.
Später soll innerhalb der Progressbar noch ein Bild eingefügt werden.
Wie kann ich also die Progressbar an der richtigen Stelle über der rechten oberen Ecke der Bilder plazieren?
Vielen Dank an alle!