# Diagramme mit Canvas erstellen



## N3WM4N (27. Jun 2021)

Hi,
ich möchte mittels canvas 3 Diagramme zu Funktionen erstellen. Und ich frage mich, wie ich folgendes vereinfachen kann, sodass ich nur eine Schleife benötige und nicht drei.


```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title>Internes JS</title>
       <script type="text/javascript">//<![CDATA[
        "use strict";
        function Zeichnen()
        {
        var t1=document.getElementById("tstart").value
        var t2=document.getElementById("tende").value
        t1=parseFloat(t1)
        t2=parseFloat(t2)
        var stoff=document.getElementById("stoff").selectedIndex
        var einheit=document.getElementById("einheit").selectedIndex
        var Zeichenfeld=document.getElementById("Dia1");
        var z=Zeichenfeld.getContext("2d");
        var Zeichenfeld2=document.getElementById("Dia2");
        var z2=Zeichenfeld2.getContext("2d");
        var Zeichenfeld3=document.getElementById("Dia3");
        var z3=Zeichenfeld3.getContext("2d");
        var i;
        var dichte;
        var visko;
        var wärme;
        var i_max=t2
        var i_skalierung=Zeichenfeld.width/i_max
        var dichte_skalierung=Zeichenfeld.height/1006.24
        var visko_skalierung=Zeichenfeld.height/0.00168
        var wärme_skalierung=Zeichenfeld.height/0.6843538
       
        if ( stoff=="0" && einheit=="0" && t1>=0 && t2<=250 && t1<=t2)
        {
        z.beginPath()
            for(i=t1; i<=t2;i=i+2.5)
            {
                dichte=(322+1094.0233*(1-(i+273.15)/(647.1))**0.35-1813.2295*(1-(i+273.15)/(647.1))**0.666667+
                3863.9557*(1-(i+273.15)/(647.1))-2479.8130*(1-(i+273.15)/(647.1))**1.33333)
            z.lineTo(i*i_skalierung,(Zeichenfeld.height-dichte*dichte_skalierung))
            z2.beginPath()
           
               
            }
            z.stroke();
           
        z2.beginPath()
            for(i=t1; i<=t2;i=i+2.5)
            {
                visko=0.00006896*Math.exp(0.45047*((613.181-(i+273.15))/((i+273.15+i)-63.697))**(1/3)+
                1.39753*((613.181-(i+273.15))/((i+273.15)-63.697))**(4/3))
            z2.lineTo(i*i_skalierung,(Zeichenfeld.height-visko*visko_skalierung))
           
               
            }
            z2.stroke();
           
        z3.beginPath()
            for(i=t1; i<=t2;i=i+2.5)
            {
                wärme=(-2.4149+(2.45165/10**2)*(i+273.15)+(-0.73121/10**4)*(i+273.15)**2
                +(0.99492/10**7)*(i+273.15)**3+(-0.53730/10**10)*(i+273.15)**4);
            z3.lineTo(i*i_skalierung,(Zeichenfeld.height-wärme*wärme_skalierung))
           
            }
            z3.stroke();
           
            document.getElementById("Absatz1").innerHTML = ausgabe;
           
        }
        }
           
           
           
           
           
           
       

           
           
           
           
           
           
           
           
       
        //]]></script>
     
    </head>
<body>
<h1>Programm zu Stoffwertberechnung</h1>
     <select id="stoff">
        <option>1</option>
        <option>2</option>
        <option>3</option>
     </select>
     <input id="tstart" placeholder="Temperatur-Start"/>
     <input id="tende" placeholder="Temperatur-Ende"/><br/>
     <p>
        <select id="einheit">
        <option>1</option>
        <option>2</option>
        </select>
        <input type="button" value="Starten" onclick="Zeichnen()"/>
     </p>
     <canvas id="Dia1" height="300" width="450" style="border:2px solid black;">
     </canvas>
     <canvas id="Dia2" height="300" width="450" style="border:2px solid black;">
     </canvas>
     <canvas id="Dia3" height="300" width="450" style="border:2px solid black;">
     </canvas>
   
    <p id="Absatz1">
    </p>
 
   
   
   
   
   
   
    </body>
</html>
```


----------



## N3WM4N (27. Jun 2021)

Hat sich erledigt. Danke trotzdem


----------

