错误：未捕获TypeError：this.draw不是一个函数

我有这个JavaScript代码，我用画在画布对象上的一个小方块，并使其向左或向右移动，但我收到此错误我不知道为什么。错误：未捕获TypeError：this.draw不是一个函数

function Walker(canvas, ctx) { 
    console.log("Received canvas with (" + canvas.width + ", " + canvas.height + ")"); 

    this.x = Math.floor((Math.random() * canvas.width) + 1); 
    this.y = Math.floor((Math.random() * canvas.height) + 1); 
    this.canvas = canvas; 
    this.ctx = ctx; 

    this.draw = function(x = this.x, y = this.y) { 
     console.log("Drawing at (" + this.x + ", " + this.y + ")"); 

     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 
     this.ctx.beginPath(); 
     this.ctx.rect(this.x, this.y, 5, 5); 
     this.ctx.fillStyle = "#000000"; 
     this.ctx.fill(); 
     this.ctx.closePath(); 
    }; 

    this.walk = function() { 
     left_or_right = Math.floor(Math.random() * 2); 

     if(left_or_right === 0) { 
      console.log("Moving right"); 
      this.x += 1; 
     } 
     else { 
      console.log("Moving left"); 
      this.x -= 1; 
     } 

     this.draw(this.x, this.y); 
    }; 

} 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var w = new Walker(canvas, ctx); 

w.draw(); 
setInterval(w.walk, 10000);

这是我的.html文件：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Gamedev Canvas Workshop</title> 
    <link rel="stylesheet" type="text/css" href="../css/style.css"> 
</head> 
<body> 
    <canvas id="myCanvas" width="480" height="320"></canvas> 
    <script src="../scripts/walk.js" type="text/javascript"></script> 
</body> 
</html>

什么是错的代码？

来源

2016-08-12 g_rmz

请参阅code.The问题是在这里

setInterval(function(){ 
     w.walk(); 
    }, 10000);

当您通过w.walk作为一个参数，它得到了来自object.If的功能getted出它失去了它的context。所以在功能w.walk的副本this不是你的w。在这种情况下，您有许多变体可以实现您的目标。

1）你可以像我的代码一样使用包装函数。
2）您可以使用bind功能 - setInterval(w.walk.bind(w), 1000 }

function Walker(canvas, ctx) { 
 
    console.log("Received canvas with (" + canvas.width + ", " + canvas.height + ")"); 
 

 
    this.x = Math.floor((Math.random() * canvas.width) + 1); 
 
    this.y = Math.floor((Math.random() * canvas.height) + 1); 
 
    this.canvas = canvas; 
 
    this.ctx = ctx; 
 

 
    this.draw = function(x = this.x, y = this.y) { 
 
     console.log("Drawing at (" + this.x + ", " + this.y + ")"); 
 

 
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
     this.ctx.beginPath(); 
 
     this.ctx.rect(this.x, this.y, 5, 5); 
 
     this.ctx.fillStyle = "#000000"; 
 
     this.ctx.fill(); 
 
     this.ctx.closePath(); 
 
    }; 
 

 
    this.walk = function() { 
 
     left_or_right = Math.floor(Math.random() * 2); 
 

 
     if(left_or_right === 0) { 
 
      console.log("Moving right"); 
 
      this.x += 1; 
 
     } 
 
     else { 
 
      console.log("Moving left"); 
 
      this.x -= 1; 
 
     } 
 

 
     this.draw(this.x, this.y); 
 
    }; 
 

 
} 
 

 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var w = new Walker(canvas, ctx); 
 

 
w.draw(); 
 
setInterval(function(){ 
 
    w.walk(); 
 
}, 10000);

<canvas id='myCanvas'></canvas>

来源

2016-08-12 08:49:48

我已经添加了我的.html文件。 –

谢谢你，你是一个拯救生命的人！ –

错误：未捕获TypeError：this.draw不是一个函数

回答

相关问题