画布不是在代码中绘制图像，而是在开发人员控制台中绘制图像

我试图创建将在画布中绘制地图和字符的类。当我在代码中刷新画布时，什么都没有出现。但是当我在Chrome的开发人员控制台中编写map.refresh（）时，它就会出现。这里是我的打字稿代码：画布不是在代码中绘制图像，而是在开发人员控制台中绘制图像

class Map { 
    width:number = 800; 
    height:number = 600; 
    img:HTMLImageElement; 
    objectList = []; 

    constructor(img:string) { 

     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 
     canvas.oncontextmenu = function() { return false; }; 
     document.body.appendChild(canvas); 

     var ctx = canvas.getContext("2d"); 
     if(!ctx) { 
      console.log("Canvas error"); 
     } 

     this.loadMap(img); 

    } 
    refresh() : any { 
     var canvas = document.querySelector("canvas"); 

     var ctx = canvas.getContext("2d"); 

     for(var i = 0; i < this.objectList.length; i++) { 
      var obj = this.objectList[i]; 
      ctx.drawImage(obj.img, 0, 0); 
     } 
    } 
    loadMap(img:string) { 
     this.img = new Image(); 
     this.img.src = img; 
     this.img.onload = <any> this.registerObject(this); 
    } 

    registerObject(obj:Object) { 
     this.objectList.push(obj); 
     this.refresh(); 
    } 

}

而且我的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      * { 
       margin: 0; 
       padding: 0; 
      } 
     </style> 
     <script src="map.js"></script> 
    </head> 
    <body> 

     <script> 
      var map = new Map("https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Worldmap_LandAndPolitical.jpg/1200px-Worldmap_LandAndPolitical.jpg"); 
     </script> 
    </body> 
</html>

来源

2017-09-26 Patryk Tabiś

这条线：

this.img.onload = <any> this.registerObject(this); 
              ^^^^^^ (invokes function)

将通过undefined到onload作为函数首先被调用，那么函数结果（undefined）已通过。应该引用回调来代替。

您可以将参数改为onload采取一个函数的定义，结合this它（否则this将代表图像本身），并从里面调用this.registerObject(this.img)。

来源

2017-09-27 08:08:08 K3N

画布不是在代码中绘制图像，而是在开发人员控制台中绘制图像

回答

相关问题