Question

我想在画布上添加next()，我认为像这样添加它可能有用，但它并没有！如何在画布中向innerHTML添加<button>元素？

早些时候（如果有帮助的话）：

<button>

ctx = myGameArea.context;

完整代码：

<script>
stop : function() {
        clearInterval(this.interval);
        ctx.fillStyle="red";
        ctx.font="80px Georgia";
        ctx.fillText("You died",125,120);
        //this next part doesn't work!!!
        ctx.innerHTML = ("<button onclick='startGame()'>Restart</button>");
    }
}
</script>

Answer 1

画布中的HTML是不可能的，但是你可以做的是让你的按钮在画布顶部的绝对位置。这是一个小例子：

button{
position:absolute;
left:100px;
top:50px;

}

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece; 
var myObstacle;
var transitionBlock;
var blockTransition;

function startGame() {
myGamePiece = new component(40, 40, "#00ff00ff", 50, 140);
myObstacle  = new component(80, 37, "#cf0000ff", 240, 0);
transitionBlock=new component(10, 80, "#f1f1f1ff", 590, 120);
blockTransition=new component(10, 80, "#f1f1f1ff", -40, 120);
myGameArea.start(); 
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
    this.canvas.width = 560;
    this.canvas.height = 320;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
        myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function (e) {
        myGameArea.key = false;
    })
},
clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
    clearInterval(this.interval);
    ctx.fillStyle="red";
    ctx.font="80px Georgia";
    ctx.fillText("You died",125,120);
}
}

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;    
this.x = x;
this.y = y;    
this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherobj.x;
    var otherright = otherobj.x + (otherobj.width);
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + (otherobj.height);
    var crash = true;
    if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
        crash = false;
    }
    return crash;
}
}

function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
} else {
    myGamePiece.update();
    myGameArea.clear();
    myObstacle.update()
    transitionBlock.update();
    blockTransition.update();
    myGamePiece.x += myGamePiece.speedX;
    myGamePiece.y += myGamePiece.speedY;
}
    if (myGameArea.key && myGameArea.key == 37||myGameArea.key && myGameArea.key == 65) {myGamePiece.speedX = -3; } else if (myGameArea.key && myGameArea.key == 39||myGameArea.key && myGameArea.key == 68) {myGamePiece.speedX = 3; } else if (myGameArea.key && myGameArea.key == 38||myGameArea.key && myGameArea.key == 87) {myGamePiece.speedY = -3; } else if (myGameArea.key && myGameArea.key == 40||myGameArea.key && myGameArea.key == 83) {myGamePiece.speedY = 3; } else {myGamePiece.speedX = 0; myGamePiece.speedY = 0;}
    myGamePiece.update();
}
</script>
<button>Hello I am a button floating on the top of the canvas</button>
</body>
</html>

正如您在示例中所看到的，按钮浮动在画布上，但不在其中。

Answer 2

<div style="position: relative;">
    <canvas style="width:300px; height: 300px;" />
    <button style="position:absolute; top: 50%; left: 50%>hello</button>
</div>

如何将innerHTML添加到现有属性

2 个答案: