如何用Javascript绘制画布

我正在构建我的第一个迷你JS游戏，并通过w3schools教程工作，但无法在codepen预览区域加载我的第一个组件。这是一个非常令人失望的前几步。我知道myGameArea加载正常，因为它的风格流行，但我只想要一个简单的红色方块来绘制它的顶部。如何用Javascript绘制画布

var myGamePiece; 

function startGame() { 
    myGamePiece = new component(30, 30, "red", 10, 120); 
    myGameArea.start(); 
} 

var myGameArea = { 
    canvas: document.createElement("canvas"), 
    start: function() { 
    this.canvas.width = 480; 
    this.canvas.height = 270; 
    this.context = this.canvas.getContext("2d"); 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    this.interval = setInterval(updateGameArea, 20); 
    }, 
    clear: function(){ 
    this.context.clearRect(0,0, this.canvas.width, this.canvas.height); 
    } 
} 


function component(width, height, color, x, y) { 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y;  
    this.update = function(){ 
     ctx = myGameArea.context; 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
} 

function updateGameArea() { 
    myGameArea.clear(); 
    myGameArea.update(); 
} 

<button onClick="startGame()"> 
Press 
</button>

来源

2016-05-13 P. Jack

您是否在控制台中发现任何错误？ – dan08

你似乎没有定义'myGameArea.update（）' –

你的意思是'myGamePiece.update（）'？ –

updateGameArea电话myGameArea.clear()，然后试图调用update不存在。运行时没有出现错误？您可能需要拨打myGamePiece.update()。

来源

2016-05-13 14:08:52 rockerest

如何用Javascript绘制画布

回答

相关问题