JavaScript的初始功能并非在画布上绘图

您好堆栈溢出社区，JavaScript的初始功能并非在画布上绘图

我的工作在JavaScript图形引擎，目前正在试图重复的图像使用它作为背景。奇怪的是，initalize()函数没有被调用，直到在浏览器控制台中直接调用。在此之前，我有按钮来移动我现在试图用作背景的图像。即使这样，图像也只会在按下其中一个按钮后出现。（旧代码被注释掉）。这里是JavaScript：

var ctx; 
var cam_x = 0,cam_y = 0; 
//End of Global Variables 
function initialize(){ 
    var canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height);//RESETS 
    var img=new Image(); 
    img.src = "brick.png"; 
    var i; 
    var j; 
    for(i = 0; i < 10; i++){ 
     for(j = 0; j < 10; j++){ 
     drawTile(img, i, j, 0); 
     } 
    } 
    console.log("should be drawing"); 

    // drawTile(img, 0,0,0); 
    // drawTile(img, 1,0,0); 
    // drawTile(img, 2,0,0); 
    // drawTile(img, 1,1,0); 
    // drawTile(img, 2,2,0); 
    // console.log("should be drawing"); 

} 

function setTransformations(){ 
    ctx.translate(-cam_x,-cam_y); 
} 

function drawTile(img,x,y,z){ 
    ctx.setTransform(1,0,-1,1,0,z); 
    setTransformations(); 
    ctx.drawImage(img,x*32,y*32); 
    ctx.setTransform(1,0,0,1,0,0); 
} 

function camtranslate(x,y){ 
    cam_x += x; 
    cam_y += y; 
    initialize(); 
}

注释掉drawTile()通话效果的翘曲图像，以便它看起来斜（但不是太相关）。下面是HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
body { 
    background-color: #1ABC9C 
} 
     </style> 
     <script src="main.js"></script> 
    </head> 

    <body> 

     <!-- <button onclick="camtranslate(16,0);"> Right </button> 
     <button onclick="camtranslate(-16,0);"> Left</button> <br> 
     <button onclick="camtranslate(0,-16);"> Up </button> 
     <button onclick="camtranslate(0,16);"> Down </button> 
     --> 

     <center> 
      <h1>Akimbo</h1> 
      <canvas id="canvas" height="600" width="600" style="border:1px solid #7F8C8D"></canvas> 
     </center> 
     <script>camtranslate(16, 0);</script> 


    </body> 
</html>

注释掉按钮进行的画面出现在压制他们，但现在我已经注释出来，即使我已经调用的函数，这是行不通的。 HTML文件应该调用initialize()函数，但是直到我在控制台中直接调用该函数，画布中才会出现任何内容。我怎样才能让页面被加载后立即显示背景？

感谢，

利玛窦

来源

2015-10-24 user5483562

你要在HTML代码中调用initialize（）吗？ – Griffith

[CanvasContext2D drawImage（）issue]的可能的重复（http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue） – Kaiido

@Griffith我称之为'camtranslate（）'函数，它调用'initialize（） '功能。 – user5483562

事情需要时间来加载和设置的图片src属性并不意味着图像可供使用。

您需要使用image.onload事件来标记图像已加载并调用使用该图像的函数。

function drawTiles(){ // create the function to draw the tiles 
    var i; 
    var j; 
    for(i = 0; i < 10; i++){ 
     for(j = 0; j < 10; j++){ 
      drawTile(img, i, j, 0); 
     } 
    } 
} 
var img=new Image(); // create image 
img.src = "brick.png"; // set the URL and it will start to load it 
img.onload = drawTiles; // the image will call your function when it has loaded

来源

2015-10-24 15:00:45 Blindman67

JavaScript的初始功能并非在画布上绘图

回答

相关问题