.fillStyle не работает, никаких ошибок в консоли

Так вот пока мой код:.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 Не изменено 60 мс] файл: ///Users/darceymckelvey/Documents/Rogue/css/style.css

Мое полотно не белое, это только цвет, который я установил для тела в своем CSS.

источник

2016-04-23 Darcey Mckelvey

Вам не хватало «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>

источник

2016-04-23 20:53:48

.fillStyle не работает, никаких ошибок в консоли

ответ

Смежные вопросы