【发布时间】：2020-05-23 13:06:45
【问题描述】：
我一直在尝试包含一个我在我的代码中声明的 css 网格类之一中创建的 html 画布。当按下“计算”按钮时代码执行。
按下按钮后，为画布声明的<div> 部分保持不变，但在网格<div> 之外的html 正文中绘制了另一个画布。但是，两个画布的画布 ID 相同，因为我已经声明了画布 ID。
即使我给出了正确的画布 ID，我似乎也找不到它创建自己的画布的原因。
<!DOCTYPE html>
<html>
<head>
<title>Staging Area Simulation</title>
<meta charset="UTF-8">
<script src="public_html/jquery.js"></script>
<style type="text/css">
#canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<!--<body onload="startGame()">-->
<body>
<div class="grid-container">
<div>
<canvas id="canvas" width="480" height="480">
</canvas>
</div>
<div>
<h3>Enter Parameters</h3>
<p id="sBubble">Safety bubble : 0.0 m</p>
Sliding Window :<p id="window"></p>
<form method="get" id="form">
speed : <input type="integer" id="speed" name="speed" /> <br /><br />
Vehicle Length : <input type="text" id="vLength" name="vLength" value="3.84m" disabled />
<br /><br />
Vehicle Width : <input type="text" id="vWidth" name="vWidth" value="1.74m" disabled />
<br /><br />
<button name="data" type="button" onclick="calculateBubble()">Calculate</button>
</form>
</div>
<div style="text-align:center;width:480px;">
<h3>
Red Controllers </h3>
<button onmousedown="redmoveup()" onmouseup="clearmove()">UP</button><br><br>
<button onmousedown="redmoveleft()" onmouseup="clearmove()">LEFT</button>
<button onmousedown="redmoveright()" onmouseup="clearmove()">RIGHT</button><br><br>
<button onmousedown="redmovedown()" onmouseup="clearmove()">DOWN</button>
</div>
<div style="text-align:center;width:480px;">
<h3> Blue Controllers</h3>
<button onmousedown="bluemoveup()" onmouseup="clearmove()">UP</button><br><br>
<button onmousedown="bluemoveleft()" onmouseup="clearmove()">LEFT</button>
<button onmousedown="bluemoveright()" onmouseup="clearmove()">RIGHT</button><br><br>
<button onmousedown="bluemovedown()" onmouseup="clearmove()">DOWN</button>
</div>
</div>
<script>
// var speed = urlParam('speed');
// if (speed == null)
// speed = 40
// $('#speed').val(speed);
// calculateBubble(parseInt(speed));
var redSBLatter;
var redSBFormer;
var redSBWindowFormer;
var redSBWindowLatter;
var blueSB;
var blueSWindow;
var myGameArea = {
canvas : document.getElementById("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function startGame(bubbleLength, windowLength) {
redSBWindowFormer = new slidingWindow(60, windowLength * 2, "black", 5, 120);
redSBWindowLatter = new slidingWindow(60, 40, "black", 5, 80);
redSBFormer = new component(30, bubbleLength, "red", 20, 120);
redSBLatter = new component(30, 30, "red", 20, 90);
blueSWindow = new slidingWindow(60, 70, "black", 120, 10);
blueSB = new component(20, 40, "blue", 140, 20);
myGameArea.start();
}
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.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
}
}
function slidingWindow(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.beginPath();
//ctx.globalAlpha = 0.2;
ctx.lineWidth = "3";
ctx.strokeStyle = color;
ctx.rect(this.x, this.y, this.width, this.height);
ctx.stroke();
}
this.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
redSBLatter.newPos();
redSBLatter.update();
redSBFormer.newPos();
redSBFormer.update();
redSBWindowLatter.newPos();
redSBWindowLatter.update();
redSBWindowFormer.newPos();
redSBWindowFormer.update();
blueSB.newPos();
blueSB.update();
blueSWindow.newPos();
blueSWindow.update();
}
function redmoveup() {
redSBLatter.speedY = -1;
redSBFormer.speedY = -1;
redSBWindowLatter.speedY = -1;
redSBWindowFormer.speedY = -1;
}
function bluemoveup() {
blueSB.speedY = -1;
blueSWindow.speedY = -1;
}
function redmovedown() {
redSBLatter.speedY = 1;
redSBFormer.speedY = 1;
redSBWindowLatter.speedY = 1;
redSBWindowFormer.speedY = 1;
}
function bluemovedown() {
blueSB.speedY = 1;
blueSWindow.speedY = 1;
}
function redmoveleft() {
redSBLatter.speedX = -1;
redSBFormer.speedX = -1;
redSBWindowLatter.speedX = -1;
redSBWindowFormer.speedX = -1;
}
function bluemoveleft() {
blueSB.speedX = -1;
blueSWindow.speedX = -1;
}
function redmoveright() {
redSBLatter.speedX = 1;
redSBFormer.speedX = 1;
redSBWindowLatter.speedX = 1;
redSBWindowFormer.speedX = 1;
}
function bluemoveright() {
blueSB.speedX = 1;
blueSWindow.speedX = 1;
}
function clearmove() {
redSBLatter.speedX = 0;
redSBLatter.speedY = 0;
redSBFormer.speedX = 0;
redSBFormer.speedY = 0;
redSBWindowLatter.speedX = 0;
redSBWindowLatter.speedY = 0;
redSBWindowFormer.speedX = 0;
redSBWindowFormer.speedY = 0;
blueSB.speedX = 0;
blueSB.speedY = 0;
blueSWindow.speedX = 0;
blueSWindow.speedY = 0;
}
/** function calculateBubble() {
var kmh = document.getElementById("speed").value;
if (kmh <= 0) {
var bubble = 5.84;
var window = bubble * 5;
document.getElementById("bubble").innerHTML = bubble;
document.getElementById("window").innerHTML = window;
return startGame(20, 20);
}
else {
//var v = getMph(kmh);
var v = kmh / 1.6093;
var feet = 2.2 * v + ((v * v) / 20);
var bubblemeters = feet / 3.28;
var bubble = parseFloat(bubblemeters.toFixed(2));
document.getElementById("bubble").innerHTML = bubble;
calculateWindow(bubble);
return bubblemeters;
}
}**/
function calculateBubble() {
var kmh = document.getElementById("speed").value;
var v = kmh / 1.6093;
var feet = 2.2 * v + ((v * v) / 20)
var meters = feet / 3.28;
$('#sBubble').empty();
$('#sBubble').append("Safety bubble : " + meters.toFixed(2) + " m");
calculateWindow(meters);
}
function calculateWindow(bubble) {
var windowMeters = bubble + 5;
var window = parseFloat(windowMeters.toFixed());
document.getElementById("window").innerHTML = window;
startGame(bubble, window);
}
</script>
</body>
</html>
【问题讨论】：
标签： javascript html css canvas