Beiträge von Sempervivum

Sempervivum

Dass man SVG verlustfrei zoomen kann, liegt daran, dass es ein Vektorformat ist, während Canvas Bitmap- bzw. Raster-orientiert ist. Informiere dich darüber.

Sempervivum

Mund animiert von lachend zu traurig:

https://jsfiddle.net/Sempervivum/xuowurje/8/

Sempervivum

Für so eine Grafik kannst Du auch SVG sehr gut nehmen. Ich glaube aber kaum, dass das eine oder das andere einfacher ist. SVG hat den Vorteil, dass man es verlustfrei zoomen kann, was bei Canvas nicht der Fall ist.

Sempervivum

Animiert mit jCanvas:

https://jsfiddle.net/Sempervivum/xuowurje/2/

Sempervivum

Wahrscheinlich meinst Du bei CSS, dass Du etwas animierst. Animieren kannst Du auch mit Canvas, wenn Du eine Bibliothek wie jCanvas verwendest. Dann verhält es sich genau wie bei einer CSS-Animation, dass sich die Form verändert, ohne dass Du die alte löschen musst.

Sempervivum

Zitat

bei jeden schleife durchlauf zeichne ich ja nur einen dünnen strich,aber irgendwie löscht der code den vorherigen strich nicht

Die vorige Grafik löschen tut er nicht von allein, das musst Du selber tun. Sieh dir die Funktion clearRect().

https://jsfiddle.net/Sempervivum/bwgscam7/4/

Sempervivum

Am einfachsten wäre es, die Schrift in der Grafik mit dem Vorhang einzufügen. Aber auf der anderen Seite doch nicht so einfach, denn dann müsste sie sich den Falten anpassen. Und das Fest ist ja jetzt vorbei.

Posting #1000, danke für den Hinweis!

Sempervivum

Zitat

Kurzer Zwischenruf: Das mit dem schwingenden Vorhang sieht wirklich Klasse aus!

Danke Jav! Ich musste dafür verschüttetes Wissen über die Differenzialgleichung der harmonischen Schwingung auffrischen.

Sempervivum

Zitat

warum ist die sonne bei vw immer rund und bei prozent wird sie orval wenn man das fenster verkleinert ?

Dafür gibt es zwei Wege:

Code

#sonne {
  width: 20vw;
  height: 20vw;

Wie Du siehst, habe ich für Breite und Höhe jedes Mal 20vw genommen. Nimmst Du %, bezieht sich die Breite auf die Breite des umgebenden Containers und die Höhe auf die Höhe.

Code

background-image: radial-gradient(circle,
    yellow 70%,
    white 70%
  )

Durch das Schlüsselwort "circle" wird ein Kreis erzwungen, auch wenn der Container rechteckig ist:

https://jsfiddle.net/Sempervivum/0o8zaLdn/5/

Sempervivum

Du hast vollkommen Recht, um das Seitenverhältnis zu erhalten braucht man Javascript. Eine Ausnahme sind Bilder, dort kann man eine Seite auf 100% und die andere auf auto setzen. Bei der Sonne würde es sich anbieten, ein Bild zu nehmen.

Auch wenn man einen radialen Farbverlauf mit radial-gradient und circle verwendet, bleibt dieser kreisförmig. Würde sich für den Regenbogen anbieten:https://jsfiddle.net/Sempervivum/0o8zaLdn/4/

Sempervivum

So etwas hat mich früher auch interessiert:

http://ulrichbangert.de/am_meer/index.php

Ich glaube nicht, dass es einfacher geht, wenn der Effekt noch natürlicher sein soll, wird es eher komplizierter, wie man an dem Skript sieht, das ich verwenden.

Sempervivum

Schaut mal, ich habe den Vorhang zum Schwingen gebracht:

https://jsfiddle.net/Sempervivum/stvdbLfL/3/

Sempervivum

Vorhang mit Grafiken:

https://jsfiddle.net/Sempervivum/4gthpxp7/3/

Sempervivum

Danke für die guten Wünsche, ich wünsche ebenfalls allen Besuchern ein frohes Weihnachtsfest!
[Blockierte Grafik: http://ulrichbangert.de/div/Frohe_Weihnachten.jpg]

Sempervivum

Das ist allerdings etwas verzwickt und unerwartet. Probiere einmal dies:

Code

    for (a = 1; a <= 10; a++) {
            document.getElementById('aa').innerHTML += '<input type="text" id="jj' + a + '" value="' + a + '">';
            document.getElementById('jj' + a + '').value = 'JJ';
            console.log(document.getElementById('jj' + a + '').getAttribute('value'), document.getElementById('jj' + a + '').value);
        }

Du siehst, dass die Zuweisung an "value" das Attribut "value" nicht ändert. Jedes Mal wenn Du das innerHTML änderst, wird es neu geparst und das Attribut wird wieder angezeigt.

Die Lösung besteht darin, das Attribut zu setzen:

Code

     for (a = 1; a <= 10; a++) {
            document.getElementById('aa').innerHTML += '<input type="text" id="jj' + a + '" value="' + a + '">';
            document.getElementById('jj' + a + '').setAttribute("value", 'JJ');
            console.log(document.getElementById('jj' + a + '').getAttribute('value'), document.getElementById('jj' + a + '').value);
        }

Macht man es dagegen so:

Code

    for (a = 1; a <= 10; a++) {
            var inp = document.createElement("input");
            inp.id = "jj" + a;
            inp.value = "JJ";
            document.getElementById('aa').append(inp);
        }

sieht das Ergebnis im DOM so aus:

html-seminar.de/woltlab/attachment/1286/

Der Wert hat wie gewünscht "JJ" aber im DOM ist davon nichts zu sehen. Das HTML wird beim Einfügen nicht geparst.

Sempervivum

Das ist eine grundlegende Funktion, die man braucht, wenn man ein Grafikprogramm entwickelt: Zeichnen einer Geraden. Ein Feldelement entspricht dann einem Pixel. 0 = Pixel ist weiß, X = Pixel ist schwarz.

Sempervivum

PS: Ich hatte mir dein Bild nicht richtig angesehen und die Orientierung des Winkels nicht berücksichtigt. So sollte es passen:

Code

    <div id="o"></div>
    <script>
        var array = [
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
        ]



        Array.prototype.draw_line = function (startX, startY, length, angle) {
            var matrix = this,
            radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians);
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].split('');

            for (var i = 0; i < length; i++) {
                var x = startX + Math.round(i * cos);
                var y = startY - Math.round(i * sin);
                if (x >= 0 && y >= 0 && x < matrix[0].length && y < matrix.length) matrix[y][x] = 'X';
            }
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].join();
            console.log(matrix);
            document.getElementById("o").innerHTML = matrix.join("<br>");
        }


        array.draw_line(15, 3, 10, 60);

    </script>

Alles anzeigen

Sempervivum

Meine Lösung:

Code

    <div id="o"></div>
    <script>
        var array = [
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
        ]



        Array.prototype.draw_line = function (startX, startY, length, angle) {
            var matrix = this,
            radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians);
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].split('');

            for (var i = 0; i < length; i++) {
                var dx = Math.round(i * cos);
                var dy = Math.round(i * sin);
                matrix[startY + dy][startX + dx] = 'X';
            }
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].join();
            console.log(matrix);
            document.getElementById("o").innerHTML = matrix.join("<br>");
        }


        array.draw_line(15, 3, 10, 60);

    </script>

Alles anzeigen

Sempervivum

Ich meine, ich hatte eine Lösung gepostet, aber ich sehe den Post nicht mehr. Vergessen, abzuschicken? Außerdem sieht dein Code anders aus als ich ihn erinnere. Hast Du ihn editiert?

Ich konnte mit wenig Aufwand die Funktion für das Aktualisieren erweitern, so dass man auch das Farbschema ändern kann:

Code

        function updateBarDisplay(selector, value, options) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var opts = canv.data("opts");
                if (options) {
                    $.extend(opts, options);
                    canv.data("opts", opts);
                }
                if (value > max) value = max;
                var barWidth = value / max * opts.barWidth;
                canv.setLayer('text', {
                    text: getText(value, max, opts)
                }).stopLayer('bar')
                .animateLayer('bar', {
                    width: barWidth,
                    fillStyle: getColor(value, opts)
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }

Alles anzeigen

Namen kannst Du ja entspr. deinem Schema ändern.

Dann würde es so aussehen:

Code

// Balken nur einmal am Anfang erstellen und im weiteren Verlauf nur ändern bzw. animieren
erstelleBalken('#balkenM1', 100, 100, {colorBar: 'red', colors: [{ threshold: 5, colorAbove: 'yellow' },{ threshold: 10, colorAbove: 'green' }],templateText:"{remaining} min", textPos: "left"});

function Zeichnen(strResponseText){
        var objDaten = JSON.parse(strResponseText);
    // 1: M1 //     
    if(objDaten.currentspeed[0]==0){
            if (Math.abs(objDaten.setlength[0]-objDaten.currentlength[0])>200){
                animiereBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'blue',colors: []});
                } 
            else {
                animiereBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'black',colors: []});
                }
        } 
        else {
            var zeitUmbau1 = Math.round((objDaten.setlength[0]-objDaten.currentlength[0])/(objDaten.currentspeed[0]*60));
            animiereBalken('#balkenM1', zeitUmbau1, 30, {colorBar: 'red',colors: [{ threshold: 5, colorAbove: 'yellow' },{ threshold: 10, colorAbove: 'green' },],templateText:"{remaining} min", textPos: "right"});
        }
    } // end if speed ok

Alles anzeigen

Sempervivum

Schnee habe ich auch:

http://ulrichbangert.de/heimat/index.p…htsmarkt_goslar

Beiträge von Sempervivum

Canvas zeichnerrei

Canvas zeichnerrei

Canvas zeichnerrei

Canvas zeichnerrei

Canvas zeichnerrei

Canvas zeichnerrei

Javascript und Userscript

Javascript und Userscript

Javascript und Userscript

Javascript und Userscript

allgemeine fragen zu Javascript

Javascript und Userscript

Javascript und Userscript

Weihnachten 2017

allgemeine fragen zu Javascript

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

AJAX String aktualisieren

Javascript und Userscript