JavaScriptキャンバス白いスクリーン

Question

私は本当に不満です、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(); 
}; 

Answer 1

次の2つの問題を持っている...

1.innerWidth/innerHeightはそれがwindowオブジェクトのプロパティですが、方法/機能ではありません。そう、正しいフォームは黒に背景の両方と船のfillStyleを設定するとあなたは、shipオブジェクトを表示することができませんwindow.innerWidth/window.innerHeight

2.だろう。そのため、のfillStyleの背景をまたはのに変更してください。

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(255,255,255)'; 
 
     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 ship 
 
     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();

#canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="canvas" width="300" height="300"></canvas>