1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Html5 Canvas "Reloaden" ohne "image" neu zu Laden? Image zwischen speichern?

Dieses Thema im Forum "Sonstige Sprachen" wurde erstellt von gixnetwork, 9. Mai 2016.

  1. gixnetwork

    gixnetwork Mitglied

    Hallo Liebe Profis,

    Ich habe einen Code an den ich gebunden bin.
    Alle (zb. 5 Sekunden ) Lade Ich das Canvas Neu, Sprich Löschen und Neu Zeichen....

    Wenn bilder (.gif) Neu geladen werden Blinke diese immer auf...

    Das Bild soll nicht flackern oder blinken aber trozdem Aktualisiert werden

    Code (Javascript):
    1.     function draw(result) {
    2.        
    3.         var c = document.getElementById("canvas");
    4.         var inst = c.getContext("2d");
    5.        
    6. // Zeichnung Gesamte fläche / Breite Höhe
    7.         c.width  = 400;
    8.         c.height = 400;
    9.  
    10.    
    11. // Funktion (Zeichnung Löschen)
    12.         inst.save();
    13.         inst.clearRect (0,0, c.width, c.height);
    14.  
    15.  
    16. var data = [2300];
    17.  
    18.  
    19. for(var i=0; i<data.length; i++) {
    20.     var dp = data[i];
    21.   inst.fillRect(40 + i*100, 220-dp, 30, 3);  
    22. }
    23.  
    24. var imageObj = new Image();
    25.        
    26. imageObj.onload = function() {
    27.         inst.drawImage(imageObj, 53, 209-dp );
    28. };
    29.     imageObj.src = '../gif/snow-2.gif';      
    30.        
    31. }
    32.  
    33. getWetter()
    34.  
    35. setInterval(function(){ getWetter() }, 5000);
    Hier ist das Original Problem https://wetter-erzenholz.ch/test/instrumente.php (DIE SCHNEEFLOCKE)

    Wie könnte ich das lösen?
    Habe so versucht http://stackoverflow.com/questions/...-250ms-without-flickering-between-each-redraw

    Aber geht nicht... weill...
    Code (Javascript):
    1.     function draw(result) {
    2.      
    3.         var c = document.getElementById("canvas");
    4.         var inst = c.getContext("2d");
    5.      
    6. // Zeichnung Gesamte fläche / Breite Höhe
    7.         c.width  = 400;
    8.         c.height = 400;
    9.  
    10.  
    11. // Funktion (Zeichnung Löschen)
    12.         inst.save();
    13.         inst.clearRect (0,0, c.width, c.height);
    UND
    Code (Javascript):
    1. }
    2.  
    3. getWetter()
    4.  
    5. setInterval(function(){ getWetter() }, 5000);
    kann / darf ich nichts ändern da es von anderen elementen benötigt wird, ich ich ausgebaut habe zur besseren übersicht.

    es sind noch weitere bilder geplant.. wenn's nicht flackern würde

    Freundliche grüsse aus Frauenfeld - Schweiz