Question

所以，我们有一个项目，我们必须为掷骰子游戏编码。我无法在画布上显示滚动编号。我按顺序编写了大部分实际脚本，但是在画布上打印它是我得到的。出了什么问题？这是代码：

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

Answer 1

文字与背景颜色相同，因此会显示它，但您无法看到它。此外，您没有定义字体，因此您将获得一个非常小的字体。

将您的打印代码更改为：

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); 

}

但是，既然您已经能够看到文本，那么代码还有其他问题...但我会假设您还没有完成编码。< / p>

无法使用JavaScript在画布上显示文本

1 个答案: