2016-03-30 33 views
0

私はピクセルグリッドキャンバスを使ってJavascriptを使って描画しています。私はそれがすべきだが、Firefox上でのみ実行しているすべてを持って、それはページをリフレッシュした後にのみ動作します。非同期読み込みの問題

私の質問は次のとおりです。これは、リフレッシュ後に適切な出力しか得られないのはなぜですか、最初の試行で正しい出力を得るためには何ができますか?

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>

ここでは私の個人サイト上で実行されていることへのリンクです: http://pgc.00ffff3.com/

編集:

が、それは静止画用オンロードでの描画機能を同封ますが、同じことをする。私はこれを間違って理解していますか

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 };

+0

あなたの質問のタイトルは、「なぜこのコードが機能していないのですか」という理由で質問を閉じることができます**理由。 –

答えて

1

あなたのイメージの負荷があなたのイメージを動作するようにあなたのコードのためにそう非同期であるため、主な理由は、あなたがそれをペイントしようとする前にロードする必要があります。あなたはJSの画像をプリロードすることができます。その後、すべての画像の読み込みが成功するとdrawImageAtメソッドを起動します。

+0

編集をご覧ください。私は.onloadを使ってみましたが、動作しませんでした。しかし、試みてくれてありがとう – CyanPrime

+0

今、リフレッシュに取り組んでいません。 –

+0

「これは」オンロードが追加された後、間違った場所を指していました。 onloadの前に "var me = this"を追加して修正しました。助けてくれてありがとう:D – CyanPrime

関連する問題