2016-04-23 10 views
1

にエラーがだからここに私のコードません:.fillStyleが機能していない、コンソール

<!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> 

とJavascript:

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

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

コンソールアウト私が手には、次のとおりです。

ファイル:// /Users/darceymckelvey/Documents/Rogue/css/style.css ファイル:///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 Not Modified 60ms] ファイル:///Users/darceymckelvey/Documents/Rogue/css/style.css

私のキャンバスは白ではなく、私のCSSで本文を設定した色です。

答えて

1

スクリプトに「var」がありませんでした。また、色で塗りつぶすオブジェクトもありません。だから、それを色で塗りつぶすには、それを作成する必要があります。詳細はthis documentation on fill()を参照してください。以下は、動作する例です:

<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> 
関連する問題