0
Ich arbeite an einem Pixel Grid Canvas, um Sachen in Javascript zu zeichnen. Ich habe alles so laufen lassen, wie es sollte, aber nur in Firefox, und es funktioniert nur nach dem Aktualisieren der Seite.Asynchrone Ladeprobleme
Meine Frage ist: Warum gibt dies nur die richtige Ausgabe nach einer Aktualisierung und was kann ich tun, um es die richtige Ausgabe beim ersten Versuch zu haben.
function PixelGridCanvas(){
\t this.init = function(canvas, ps, gs, pc, gc){
\t \t this.ctx = canvas.getContext("2d");
\t \t this.pixelSize = ps;
\t \t this.gridSize = gs;
\t \t
\t \t this.gridWidth = canvas.width/ps;
\t \t this.gridHeight = canvas.height/ps;
\t \t
\t \t if(this.gridWidth <= 1) this.gridWidth = 1;
\t \t if(this.gridHeight <= 1) this.gridHeight = 1;
\t \t
\t \t this.pixelColor = pc;
\t \t this.gridColor = gc;
\t };
\t
\t this.clearCanvas = function(){
\t \t \t
\t \t \t this.ctx.fillStyle = this.pixelColor;
\t \t \t this.ctx.fillRect(0,0, (this.gridWidth * this.pixelSize) - this.pixelSize, (this.gridHeight * this.pixelSize) - this.pixelSize);
\t \t \t
\t \t \t this.ctx.fillStyle = this.gridColor;
\t \t \t var drawLine = false;
\t \t \t
\t \t \t for(var i = 0; i < this.gridWidth * 2; i++){
\t \t \t \t if(drawLine) this.ctx.fillRect(i * this.pixelSize,0, this.pixelSize, ((this.gridHeight * this.pixelSize) * 2) + this.pixelSize);
\t \t \t \t drawLine = !drawLine;
\t \t \t }
\t \t \t
\t \t \t var drawLine = false;
\t \t \t for(var i = 0; i < this.gridHeight * 2; i++){
\t \t \t \t if(drawLine) this.ctx.fillRect(0,i * this.pixelSize, ((this.gridWidth * this.pixelSize) * 2) - this.pixelSize, this.pixelSize);
\t \t \t \t drawLine = !drawLine;
\t \t \t }
\t };
\t
\t this.drawImageAt = function(src, destx, desty){
\t \t console.log("drawImage");
\t \t var img = new Image();
\t \t img.src = src;
\t \t var icanvas = document.createElement('canvas');
\t \t icanvas.width = img.width;
\t \t icanvas.height = img.height;
\t \t var ictx = icanvas.getContext('2d');
\t \t ictx.drawImage(img, 0, 0, img.width, img.height);
\t \t
\t \t for(var x = 0; x < icanvas.width; x++){
\t \t \t for(var y = 0; y < icanvas.height; y++){
\t \t \t \t
\t \t \t \t //console.log("pixel");
\t \t \t \t
\t \t \t \t var pixel = ictx.getImageData(x, y, 1, 1);
\t \t \t \t var data = pixel.data;
\t \t \t \t var rgba = 'rgba(' + data[0] + ',' + data[1] +
\t \t \t \t \t \t \t ',' + data[2] + ',' + data[3] + ')';
\t \t \t \t \t \t \t
\t \t \t \t this.ctx.fillStyle = rgba;
\t \t \t \t this.ctx.fillRect((destx * this.pixelSize) + (x * this.pixelSize) + (x * this.pixelSize), (desty * this.pixelSize) + (y * this.pixelSize) + (y * this.pixelSize), this.pixelSize, this.pixelSize);
\t \t \t \t
\t \t \t }
\t \t }
\t };
\t
\t this.drawImage = function(src){
\t \t this.drawImageAt(src,0,0);
\t };
}<html>
\t <head>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
\t <script src="js/pgc/main.js"></script>
\t
\t <script>
\t $(document).ready(function() {
\t \t var c = document.getElementById("myCanvas");
\t \t var pgc = new PixelGridCanvas();
\t \t pgc.init(c, 2, 2, "#eeeeee", "#ffffff");
\t \t
\t \t pgc.clearCanvas();
\t \t pgc.drawImage("imgs/test1.png");
\t \t
\t \t pgc.drawImageAt("imgs/test1.png", 50,50);
\t });
\t </script>
\t \t
\t </head>
\t <body>
\t \t <canvas id="myCanvas" width="320" height="320"></canvas>
\t \t
\t \t
\t </body>
</html>Hier ist ein Link auf meiner persönlichen Website ausgeführt wird: http://pgc.00ffff3.com/
edit:
die Zeichenfunktion in einem onload für das Bild eingeschlossen, aber es immer noch macht das Gleiche. Verstehe ich das falsch?
this.drawImageAt = function(src, destx, desty){
\t \t console.log("drawImage");
\t \t var img = new Image();
\t \t
\t \t img.onload = function() {
\t \t \t var icanvas = document.createElement('canvas');
\t \t \t icanvas.width = img.width;
\t \t \t icanvas.height = img.height;
\t \t \t var ictx = icanvas.getContext('2d');
\t \t \t ictx.drawImage(img, 0, 0, img.width, img.height);
\t \t \t
\t \t \t for(var x = 0; x < icanvas.width; x++){
\t \t \t \t for(var y = 0; y < icanvas.height; y++){
\t \t \t \t \t
\t \t \t \t \t //console.log("pixel");
\t \t \t \t \t
\t \t \t \t \t var pixel = ictx.getImageData(x, y, 1, 1);
\t \t \t \t \t var data = pixel.data;
\t \t \t \t \t var rgba = 'rgba(' + data[0] + ',' + data[1] +
\t \t \t \t \t \t \t \t ',' + data[2] + ',' + data[3] + ')';
\t \t \t \t \t \t \t \t
\t \t \t \t \t this.ctx.fillStyle = rgba;
\t \t \t \t \t this.ctx.fillRect((destx * this.pixelSize) + (x * this.pixelSize) + (x * this.pixelSize), (desty * this.pixelSize) + (y * this.pixelSize) + (y * this.pixelSize), this.pixelSize, this.pixelSize);
\t \t \t \t \t
\t \t \t \t }
\t \t \t }
\t \t }
\t \t
\t \t img.src = src;
\t };
Der Titel Ihrer Frage hält es immer noch eine Option, um die Frage unter ** "Warum dieser Code nicht funktioniert" ** Grund zu schließen. –