kramann.info
© Guido Kramann

Login: Passwort:










2.5.1 Das Canvas-Element

2.5.1 Das Canvas-Element (EN google-translate)

2.5.1 Das Canvas-Element (PL google-translate)

In das Canvas-Element kann "hinein gemalt" werden. D.h. von Javascript aus können an bestimmte Koordinaten mit bestimmten Befehlen Linien, Primitive und auch Text gesetzt werden.

In the canvas element can into it That From javascript you can specify specific coordinates with certain commands lines, primitives and even te be set.

W element canvas może do niego że Z javascript można określić konkretne współrzędne z niektórymi liniami poleceń, prymitywami, a nawet tekst być ustawiony.

Ein Beispiel soll dies demonstrieren:

An example should demonstrate this:

Przykład powinien to wykazać:


<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script language:javascript>
            let HEXA = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];

            var malkontext = null;

            var muenzwurf_x = 0.901;

            function muenzwurf()
            {
                muenzwurf_x = 3.92*muenzwurf_x*(1.0-muenzwurf_x);
                return (Math.round(muenzwurf_x*1000.0))%2;
            }

            function muenzwurf1000(max)
            {
                var x = 0;
                var y = 0;
                var z = 0;
                for(var i=0;i<1000;i++)
                {
                    x+=muenzwurf();
                    y+=muenzwurf();
                    z+=muenzwurf();
                }
                return (x+y*103+z*911)%max;
            }

            //Farbbeispiele: http://html-color-codes.com/rgb.html
            function farbe(r,g,b)
            {
                return "#"+HEXA[Math.floor(r/16)]+HEXA[r%16]+HEXA[Math.floor(g/16)]+HEXA[g%16]+HEXA[Math.floor(b/16)]+HEXA[b%16];         
            }


            function malen()
            {
                //Lazy binding: 
                //Erst, wenn etwas benötigt wird, wird es bereitgestellt.
                if(malkontext==null) 
                {
                    malkontext = document.getElementById("grafik").getContext("2d"); 
                }

                for(var i=0;i<100;i++)
                {
                    var x = muenzwurf1000(500);//+muenzwurf10000(200)+muenzwurf10000(200);
                    var y = muenzwurf1000(200);
                    var breite = muenzwurf1000(100)+10;
                    var hoehe = muenzwurf1000(100)+10;
                    var ROT   = muenzwurf1000(256);
                    var GRUEN = muenzwurf1000(256);
                    var BLAU  = muenzwurf1000(256);
                    malkontext.fillStyle = farbe(ROT,GRUEN,BLAU);
                    malkontext.fillRect(x,y,breite,hoehe);
                } 
                for(var i=0;i<100;i++)
                {
                    var x = muenzwurf1000(500);//+muenzwurf10000(200)+muenzwurf10000(200);
                    var y = muenzwurf1000(200);
                    var breite = muenzwurf1000(100)+10;
                    var durchmesser = muenzwurf1000(10)+10;
                    var ROT   = muenzwurf1000(256);
                    var GRUEN = 0;
                    var BLAU  = 0;
                    malkontext.fillStyle = farbe(ROT,GRUEN,BLAU);
                    malkontext.beginPath();
                    malkontext.arc(x,y,durchmesser,0,2.0*Math.PI,true);
                    malkontext.fill();
                }   
               
            }

        </script>
    </head>
    <body>
        <input style="width:200px" type="button" id="snap" value="malen" onclick="javascript:malen()"/>
        <br/>
        <canvas id="grafik" width="500" height="200"></canvas>
    </body>
</html>

Code 2.5.1-1: Quelltext zu obigem Beispiel.