Canvas 3D Pie Chart

drsoong · 27.10.2011, 13:34

Hi

mache gerade meine ersten Gehversuche mit dem Canvas-Element.
Versuche, ähnlich wie ich das mit GD2 mache, "Quasi-Kreise" zu zeichnen,
deren maximaler vertikaler Durchmesser die Hälfte ihres maximal horizontalen
Durchmessers beträgt.

Der nachstehende Code produziert "Nur-2D"-Pie Charts. Kann mir jemand einen Tip geben, wie ich möglichst geschmeidig zum vorbeschriebenen 3D-Effekt komme. Mir fehlen da gerade die Ideen bzw. Quellen.

Code:

<html>
 <head>
  <script type="application/javascript">

function getRadians(deg) {
    return (Math.PI/180) * deg;
}

sum = function(o){
    for(var s = 0, i = o.length; i; s += o[--i]);
    return s;
};

randomCol = function(minVal,maxVal) {
    back = parseInt(minVal + Math.random() * maxVal);
    return back.toString();
    }


function draw_pie(x,y,radius,pie_values,alpha,canvasId) {
 
 
 var canvas = document.getElementById(canvasId);
 var ctx = canvas.getContext("2d");

totalSum = sum(pie_values);
parts = pie_values.length;



pie_part_start = 0;

 for(i=0;i<=parts;i++) {
    
    partPerc = parseFloat(pie_values[i]) / totalSum;
    part_size = partPerc * 360;
    pie_part_stop = pie_part_start + part_size;
    r = randomCol(20,220);
    g = randomCol(20,220);
    b = randomCol(20,220);
    colorNow = "rgba(" + r + "," + g + "," + b + "," + alpha.toString() + ")";
    
    ctx.fillStyle = colorNow;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.arc(x,y,radius,getRadians(pie_part_start),getRadians(pie_part_stop),false);
    ctx.lineTo(x,y);
    ctx.fill();
    pie_part_start = pie_part_stop;
 }


}

function startUp() {
    draw_pie(150,150,100,[20,30,50,60,10],0.5,'canvas')
    
}

  </script>
 </head>
 <body onload="startUp();">
   <canvas style="border: 2px solid green" id="canvas" width="300" height="300"></canvas>
 </body>
</html>

eagle275 · 27.10.2011, 13:48

das Problem liegt wohl an der benutzten arc-Methode, die zeichnet ausschließlich Kreissegmente - du brauchst die Entsprechung für Elipsen, um mit den unterschiedlichen Halbmessern in x/y-Richtung klarzukommen

drsoong · 27.10.2011, 15:19

Zitat:

Zitat von eagle275

das Problem liegt wohl an der benutzten arc-Methode, die zeichnet ausschließlich Kreissegmente - du brauchst die Entsprechung für Elipsen, um mit den unterschiedlichen Halbmessern in x/y-Richtung klarzukommen

Danke. Habe gerade festgestellt, dass eine Ellipsen-Methode nativ wohl nicht
vorhanden ist. Habe aber hier was interessantes gefunden. Da wird der "context" gesaved und restored und horizontal gestrechted, was mir sagt, dass ich mich wohl erst mal mit dem Canvas-Konzept ansich befassen muss

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Aus Canvas Bild machen	adminlukas	PHP Einsteiger	4	15.07.2011 11:26
Canvas als Bild speichern - AJAX an PHP, Bild aber korrupt...	Fuchur84	PHP-Fortgeschrittene	1	26.09.2010 14:38
Datenbank auslesen + Google Chart Api aufrufen	sunshineh	PHP Tipps 2010	2	09.05.2010 15:41
PHP Chart Flot	Cyberbob_at_tot	PHP Tipps 2010	1	13.04.2010 09:54
HTML 5 - Canvas	duo	HTML, Usability und Barrierefreiheit	2	08.04.2010 17:27
Scriptsuche Canvas speichern	draco88	Scriptbörse	1	27.02.2010 03:38
Chart erstellen	ketchup	PHP Tipps 2009	6	14.02.2009 14:31
Chart Skript	socke	Beitragsarchiv	6	05.04.2005 23:21


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.10.2011, 13:48
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	das Problem liegt wohl an der benutzten arc-Methode, die zeichnet ausschließlich Kreissegmente - du brauchst die Entsprechung für Elipsen, um mit den unterschiedlichen Halbmessern in x/y-Richtung klarzukommen __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste