HTML5得出停留在頂部

我創建一個文件，像diferent函數調用functions.js文本：HTML5得出停留在頂部

bgImage（）
的drawImage（）
的setText（）

我的問題是，我的文字保持不變。

我想要做的是，當我打電話setText（）我可以把文本我想要的地方。文本將被放置在convas的頂部。我知道我需要首先調用圖像繪製加載函數來讓它們不覆蓋我的文本。但我在我的JS中這樣做了。

所以它非常重要，我可以調用函數setText（）多次作爲我想要的，所有圖像繪製/設置後，文本將可見。

我想要頂部的文字。

這裏是我的代碼：

functions.js

var canvas = ""; 
var context = ""; 

function canvasInit() { 
    canvas = document.getElementById('myCanvas'); 
    context = canvas.getContext('2d'); 
} 

function bgImage() { 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     var pattern = context.createPattern(imageObj, 'repeat'); 
     context.rect(0, 0, canvas.width, canvas.height); 
     context.fillStyle = pattern; 
     context.fill(); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png'; 
} 

function drawImage() { 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     context.drawImage(imageObj, 10, 50); 
     context.drawImage(imageObj, x, y, width, height); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
} 

function (text) { 
    context.font = 'italic 40pt Calibri'; 
    context.fillText(text, 150, 100); 
}

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <script src="functions.js"></script> 
    <script> 
     document.addEventListener('DOMContentLoaded',ready); 
     function ready() { 
      canvasInit(); 
      bgImage(); 
      drawImage(); 
      setText("Yo"); 
      setText("heyyyy"); 
     } 
    </script> 
</head> 
<body> 
    <canvas id="myCanvas" width="500" height="400"></canvas> 
</body> 
</html>

更新的測試不工作：

個

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <script src="functions.js"></script> 
    <script> 
     document.addEventListener('DOMContentLoaded',ready); 
     function ready() { 
      canvasInit(); 
      bgImage(function() { 
       setText(); 
      }); 
     } 
    </script> 
</head> 
<body> 
    <canvas id="myCanvas" width="500" height="400"></canvas> 
</body> 
</html>

functions.js

var canvas = ""; 
var context = ""; 

function canvasInit() { 
    canvas = document.getElementById('myCanvas'); 
    context = canvas.getContext('2d'); 
} 

function bgImage(callback) { // add parameter for function 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     var pattern = context.createPattern(imageObj, 'repeat'); 
     context.rect(0, 0, canvas.width, canvas.height); 
     context.fillStyle = pattern; 
     context.fill(); 

     if (typeof callback === 'function') { 
      callback(); // invoke callback function 
     } 

    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png'; 

} 

function drawImage() { 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     context.drawImage(imageObj, 10, 50); 
     context.drawImage(imageObj, x, y, width, height); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
} 

function setText() { 
    context.font = 'italic 40pt Calibri'; 
    context.fillText("Yoo adfa ds asd a sd", 150, 100); 
}

來源

2013-10-27 Daniel

我從來沒有得到我的代碼工作。不過，我發現了一些名爲「http://kineticjs.com/」的框架，我使用它解決了我的問題。

感謝您對Ken - Abdias Software的評論。我也看了一下你的個人資料描述中鏈接的內容。看起來非常整齊;）

但是我覺得它最好接受解決我的問題的答案，我自己解決了它。再次

謝謝:)

來源

2013-11-04 12:53:30 Daniel

這是因爲你的圖像加載是異步的：之前的圖像已完成加載您繪製文本作爲函數退出設置源後。然後，當圖像完成加載後，調用onload函數，並在之前繪製的任何圖形（本例中爲文本）上繪製圖像。

你需要實現一個回調處理函數，以便讓這個工作 - 例如：

function bgImage(callback) { /// add parameter for function 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     var pattern = context.createPattern(imageObj, 'repeat'); 
     context.rect(0, 0, canvas.width, canvas.height); 
     context.fillStyle = pattern; 
     context.fill(); 

     if (typeof callback === 'function') 
      callback(); /// invoke callback function 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png'; 
}

然後你使用它：

bgImage(function() { 
    setText(); 
});

你當然需要做到這一點其他圖像加載功能也是如此。提示：如果你最終得到一個長鏈，最好分配非匿名函數，而不是像上一個例子那樣內聯它們。

更新：

只是爲了清晰：這是很重要的，所提供的功能是提供一個參考和調用，例如不結果：使用回調是這樣的：

bgImage(setText); /// correct

不是這樣：

bgImage(setText()); /// wrong

用括號簡單地調用setText，其結果i作爲回調傳遞。這意味着將首先繪製文本，然後調用bgImage。

來源

2013-10-27 17:23:52 K3N

確定這看起來很不錯..我有一些問題..比方說，我想25個文本後調用10個圖像，然後。我已經可以在腦海中看到瘋狂的功能列表。在這種情況下你會做什麼？這件事是我需要能夠動態地輸入文本，每當我需要時。所以我不能依靠繪製負載上的一切。我需要能夠插入文本讓我們說一個按鈕上的點擊事件。 – Daniel

我不能讓你的代碼示例工作。我只是複製粘貼你寫的和替換的。 – Daniel

如果我只drawImage（）它的作品，但在我的代碼我不使用drawImage（）。 – Daniel

HTML5得出停留在頂部

回答

相關問題