如何将InnerHTML添加到现有属性中

我想向画布添加一个 <button>，我认为添加它会这样添加，但是它不起作用！如何将<button>元素添加到画布内的InnerHTML？

较早(如果有帮助的话(：

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>

有关完整代码：

<!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>
</body>
</html>

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>

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

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

相关内容

最新更新

热门标签：