JavaScript画布白色屏幕

我现在真的很沮丧，JS从来都不适合我。我不知道这次我犯了什么小错误，如果你能指出，我将不胜感激。我不想要动画或任何东西，如果有人告诉我错误，我会很高兴

window.onload = function(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth();
  canvas.height = window.innerHeight();

var ship = function() {
this.x = canvas.width/2;
this.y = canvas.height/2;
this.velocityX = 0;
this.velocityY = 0;
this.accelerationX = 0;
this.accelerationY = 0;

this.show = function() {
  //background
  context.fillStyle = 'rgb(0,0,0)';
  context.fillRect(0,0,canvas.width,canvas.height);

  //update
  this.velocityX += this.accelerationX;
  this.velocityY += this.accelerationY;
  this.x += this.velocityX;
  this.y += this.velocityY;

  //draw
  context.save();
  context.translate(this.x,this.y) ;
  context.fillStyle = 'rgb(0,0,0)';
  context.fillRect(0,0,20,30);
  context.restore();
};
};


var myship = new ship();
myship.show();
}; 

---

你有两个问题

1. 

innerWidth/innerHeight

不是一个方法/函数，它是

窗口

对象的属性。那么  正确的形式应该是

window.innerWidth/window.innerHeight

2.  您无法查看

ship

对象，因为您同时设置了背景和ship的

fillStyle

  至黑色。因此，要么更改背景的

fillStyle

，要么将船舶更改为不同的颜色

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ship=function（）{
这个.x=canvas.width/2；
这个.y=canvas.height/2；
此值为0.velocityX=0；
这个.velocityY=0；
这是加速度x=0；
这是加速度y=0；
this.show=函数（）{
//背景
context.fillStyle='rgb（255255）'；
context.fillRect（0,0，canvas.width，canvas.height）；
//更新
this.velocityX+=this.accelerationX；
this.velocityY+=this.accelerationY；
this.x+=this.velocityX；
this.y+=this.velocityY；
//拖船
context.save（）；
翻译（this.x，this.y）；
context.fillStyle='rgb（0,0,0）'；
fillRect（0,0,20,30）；
restore（）；
};
};
var myship=新船（）；
myship.show（）
#画布{
边框：1px纯黑；
}
您有两个问题

1. 
innerWidth/innerHeight
不是一个方法/函数，它是
窗口
对象的属性。那么  正确的形式应该是
window.innerWidth/window.innerHeight

2.  您无法查看
ship
对象，因为您同时设置了背景和ship的
fillStyle
  至黑色。因此，要么更改背景的
fillStyle
，要么将船舶更改为不同的颜色


var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ship=function（）{
这个.x=canvas.width/2；
这个.y=canvas.height/2；
此值为0.velocityX=0；
这个.velocityY=0；
这是加速度x=0；
这是加速度y=0；
this.show=函数（）{
//背景
context.fillStyle='rgb（255255）'；
context.fillRect（0,0，canvas.width，canvas.height）；
//更新
this.velocityX+=this.accelerationX；
this.velocityY+=this.accelerationY；
this.x+=this.velocityX；
this.y+=this.velocityY；
//拖船
context.save（）；
翻译（this.x，this.y）；
context.fillStyle='rgb（0,0,0）'；
fillRect（0,0,20,30）；
restore（）；
};
};
var myship=新船（）；
myship.show（）
#画布{
边框：1px纯黑；
}
屏幕上的
画布是什么颜色？我这样做是因为我既看不到黑色的矩形也看不到黑色的对象，我得到了一个白色的屏幕不，我也尝试了JSHint。我正在codepen上执行此操作。若要查看错误，请右键单击，然后单击“检查”。CodePen的控制台不显示错误
：（
。这里有一个错误：
window.innerWidth不是一个函数
是的，我尝试了使用JS提示检查错误的'Analyze JS'。控制台似乎也是空的。屏幕上的
画布是什么颜色的
？我这样做是因为我既不能查看黑色的矩形也不能查看黑色的对象，所以我得到了一个白色的屏幕不，我尝试了JSHint作为一个窗口好的。我正在codepen上执行此操作。若要查看错误，请右键单击，然后单击“检查”。codepen的控制台不会显示错误
：（
）。这里是错误：
窗口。innerWidth不是一个函数
是的，我尝试了使用JS提示检查错误的“分析JS”。控制台似乎也是空的。