2016-04-23 5 views
1

Also hier ist mein Code:.fillStyle nicht funktioniert, keine Fehler in der Konsole

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Rogue Game</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/main.js"></script> 
</head> 
<body onload="canvasGame()"> 
    <canvas id="myCanvas" width="800" height ="800"> 
    <p>Sorry your browser does not support canvas!</p> 
    </canvas> 

</body> 
</html> 

und Javascript:

function canvasGame() { 
    canvas = document.getElementById("myCanvas"); 

    if(canvas.getContext) { 
    ctx = canvas.getContext("2d"); 
    ctx.fillStyle = "white"; 
    ctx.fill(); 
    } 
} 

Die Konsole aus ich erhalte, ist:

file: // /Users/darceymckelvey/Documents/Rogue/css/style.css file: ///Users/darceymckelvey/Documents/Rogue/js/main.js GET https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js [HTTP/2.0 304 Nicht geänderte 60ms] file: ///Users/darceymckelvey/Documents/Rogue/css/style.css

Meine Leinwand es nicht weiß ist nur die Farbe, die ich den Körper in meinem CSS gesetzt.

Antwort

1

Sie haben 'var' im Skript vermisst. Sie haben auch keine Objekte mit der Farbe zu füllen. Sie müssen also einen erstellen, um ihn mit einer Farbe zu füllen. Weitere Informationen finden Sie unter this documentation on fill(). Hier ist ein Beispiel, das funktioniert:

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Rogue Game</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> 
<script type="text/javascript" src="js/main.js"></script> 
</head> 
<body onload="canvasGame()"> 
    <canvas id="myCanvas" width="800" height ="800"> 
    <p>Sorry your browser does not support canvas!</p> 
    </canvas> 
<script> 
function canvasGame() { 
    var canvas = document.getElementById("myCanvas"); 

    if(canvas.getContext) { 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    ctx.rect(20, 20, 150, 100); 
    ctx.fillStyle = "white"; 
    ctx.fill(); 
    } 
} 
</script> 
</body> 
</html> 
Verwandte Themen