Невозможно отобразить текст на холсте с помощью JavaScript

Итак, у нас есть проект, в котором мы должны закодировать для игры в крэпс. У меня возникают проблемы с отображением номеров рулонов на холстах. У меня большая часть фактического сценария по порядку, но печать на холсте - это то, что меня достает. Что случилось? Вот код:Невозможно отобразить текст на холсте с помощью JavaScript

<!DOCTYPE html> 
<html> 
<head> 
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 

<title>Game of Craps</title> 
<script> 
var roll1 = 0; 
var roll2 = 0; 
var lose = 0; 
var win = 0; 
var sumOfDice = 0; 
var i = 0; 

function rollDice(){ 
    var roll1 = Math.floor(Math.random()*6)+1; 
    var roll2 = Math.floor(Math.random()*6)+1; 
    sumOfDice = roll1 + roll2; 
    return sumOfDice; 
} 
function play(){ 
    while (i < numOfGames){ 
     rollDice() 
     i++ 
    } 

    sumOfDice = rollDice() 


    switch (sumOfDice) { 
     case 7: case 11: 
      win++; 
      break; 
     case 2: case 3: case 12: 
      lose++; 
      break; 
     default: 
      var point = sumOfDice; 
      sumOfDice = rollDice(); 

      while (point != sumOfDice){ 
       if (sumOfDice == 7){ 
        lose++; 
        break; 
       } 
       rollDice(); 
       sumOfDice = roll1+roll2; 
       } 

      if (point == sumOfDice) { 
       win++; 
      } 
      break; 

    } 
} 

function print(){ 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "maroon"; 
    ctx.fillRect(300, 175, 200, 200); 
    ctx.fillText(roll1, 350, 300) 
    ctx.fillStyle = "black"; 

    var d = document.getElementById("canvas"); 
    var ctx = d.getContext("2d"); 
    ctx.fillStyle = "maroon"; 
    ctx.fillRect(20, 175, 200, 200); 

} 
</script> 
</head> 
<body> 

<h1>My Game of Craps</h1> 

<fieldset id="fieldset"> 
    <legend><div id="title">Rules:</div></legend> 
     <p class="rules">1st roll:<br> 
      2, 3, 12 are losers<br> 
      7, 11 are winners<br> 
      4, 5, 6, 8, 9, or 10 establish your point for the next roll<br><br> 

      Next roll:<br> 
      7 is a loser<br> 
      Making your point (getting the same value as the first roll) is a winner<br> 
      All other values require another roll of the dice</p> 
</fieldset> 

<canvas id="canvas" width="500" height="500" style="border:5px solid navy blue;"> </canvas> 

<input type="button" onclick="print()" value="Roll"> 


<script> 
var ask = prompt("Do you want to play my game of craps? Answer yes or no", "yes") 
    if (ask == "yes"){ 
     var numOfGames = prompt ("How many times do you wish to play?", "4")} 
    else if (ask == "no"){ 
     document.write("Oh, well.") 
    } 

var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
ctx.fillStyle = "maroon"; 
ctx.fillRect(300, 175, 200, 200); 

var d = document.getElementById("canvas"); 
var ctx = d.getContext("2d"); 
ctx.fillStyle = "maroon"; 
ctx.fillRect(20, 175, 200, 200); 
</script> 


</body> 
</html>

источник

2016-05-10 cam c

Текст того же цвета, что и фон, поэтому он отображает его, но вы его не видите. Кроме того, вы не определили шрифт, так что вы получите маленький шрифт.

Изменить код для печати на это:

function print(){ 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "maroon"; 
    ctx.fillRect(300, 175, 200, 200); 
    ctx.fillStyle = "white"; 
    ctx.font="100px Georgia"; 
    ctx.fillText(roll1, 350, 300) 


    var d = document.getElementById("canvas"); 
    var ctx = d.getContext("2d"); 
    ctx.fillStyle = "maroon"; 
    ctx.fillRect(20, 175, 200, 200); 

}

Однако теперь, когда вы можете увидеть текст, есть и другие проблемы с кодом ... но я буду считать, что это просто что вы еще не закончили его кодирование.

источник

2016-05-10 19:40:27

есть другие проблемы? неудивительно, что он не работает –

хорошо, вы хотя бы можете увидеть номер на блоке? –

, когда я сказал другие проблемы, заключается в том, что когда вы нажимаете на рулон, все, что он делает, отображает число 0 на одном блоке .... вам нужна дополнительная помощь в исправлении остальной части кода, кроме того, что вы показываете номер на кости? –

Невозможно отобразить текст на холсте с помощью JavaScript

ответ

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