paddex: Array mit Canvas Elementen Sichern

Beitrag lesen

SELF-Forum

Array mit Canvas Elementen Sichern

paddex
– Informationen zu den Bewertungsregeln

Hallo zusammen,

Hier handelt es sich um meinen ersten Beitrag also entschuldigt mir bitte kleine Fehler. ;) Ich habe hier eine kleine Seite mit Canvas Elementen geschrieben, diese werden wenn man sie anklickt blau eingefärbt. Diese Einfärbung verschwindet natürlich wieder wenn man die Seite neu lädt. Nun meine Frage, wie kann ich dies verhindern, sprich die Seite soll für alle Nutzer immer den veränderten Zustand anzeigen und diesen Zustand zuverlässig speichern. Bin in Sachen php und Co. nicht so versiert, aber das muss doch sicher irgendwie gehen. Für Verbesserungen im Code bin ich natürlich offen. Danke schon mal im Voraus für eure Beiträge. :D

<!DOCTYPE html>
<html>
	<head>
		<style>
			#my_canvas{
				overflow-x:hidden;
				overflow-y:hidden;
				margin-top:-0.4em;
				margin-left:-0.4em;
				opacity:0.7;	
			}

			body{
				background: #fff url(fussballfeld_bild_20140504_1477602326.png) no-repeat;
				overflow-x:hidden;
				overflow-y:hidden;
				width="980";
				height="880"; 	
			}		
		</style>

		<script>
            function initCanvas(){
    
                var ctx = document.getElementById('my_canvas').getContext('2d');
                
                ctx.canvas.addEventListener('mousedown', function(event) {
                    var mX = event.clientX - ctx.canvas.offsetLeft;
                    var mY = event.clientY - ctx.canvas.offsetTop;
                
                    for(var i = 0; i < kasten.length; i++){
                        var b = kasten[i];
                          if(mX >= b.x && mX < b.x+b.w && mY >= b.y && mY < b.y+b.h){
                          document.getElementById('status').innerHTML = "You touched "+b.id;
                          b.bg =  "blue";
                          ctx.fillStyle = "blue";
                          ctx.fillStyle = b.g;
                          ctx.fillRect(b.x,b.y,b.w,b.h);
                          ctx.restore();              
                          }//Ende if	
                    }//ENde For
                });//ENde Eventlistener
    
    
    
                var ctx = document.getElementById('my_canvas').getContext('2d');
                var kasten = new Array(1000);
                var kastenid= 0;
                
                for(var i = 0; i < 100; i++){
                    for(var j = 0; j < 60; j++){
                        var xpos = i*8.86;
                        var ypos = j*9.95;										  
                        var test = {"id":kastenid,"x":xpos,"y":ypos,"w":8.86,"h":9.95,"bg":"green"};
                        kasten[kastenid] = test;			
                        var c = kasten[kastenid];
                        ctx.fillStyle = "green";
                        ctx.fillRect(c.x,c.y,c.w,c.h);
                        ctx.strokeRect(c.x,c.y,c.w,c.h);
                        kastenid++;
                    }//ENde innere For-schleife
                }//Ende äußere For-Schleife	
            }//Ende initCanvas
    
            window.addEventListener('load', function(event) {
                initCanvas();
            });
        </script>
	</head>
	<body scroll="no" >
		<canvas scroll="no" id="my_canvas" width="890" height="600"></canvas>
		<h2 id="status"></h2>
	</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln