创建另一个画布后，HTML5画布不显示

Question

嗨，我是刚加入这个论坛的人，但是之前曾用它作过一些解答。 我正在使用HTML5，CSS和JS做一个学校项目，以做一些教学课。 我正在使用画布制作一些交互式工具，我的问题是：我有几个面板上的内容不同，在一个面板上我正在使用画布显示一些图像和信息，我现在试图在另一个面板上创建另一个画布。面板，但是当我这样做时，新画布中什么也没有显示。 当我删除旧的画布代码时，将显示新的画布代码，但是我认为必须有一种方法可以同时显示它们，我非常需要帮助，我确实需要使它在学校工作。 很抱歉，如果这很难理解，我的英语还不是很好。 如果有帮助，下面是代码示例。

<div class="panel">
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("h1Canvas");
var context = canvas.getContext("2d");

context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;

// set line color
context.strokeStyle = "#ff0000";
context.stroke();
};

</script>
</head>
<body>
<canvas id="h1Canvas" width="578" height="200"></canvas>
</body>
</html>


</div>

<div class="panel">
  <!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;

// set line color
context.strokeStyle = "#ff0000";
context.stroke();
};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
</div>

因此，第一个面板中的所有内容均不会显示，但第二个面板中的将会显示。 如果我从第二个面板中删除画布，则将显示第一个面板。

<div class="panel">


<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
context.strokeStyle = "#ff0000";
context.stroke();
};

</script>
</head>
<body>
<div><canvas id="myCanvas" width="578" height="200"></canvas></div>
</body>


</div>


<div class="panel">

<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var h1canvas = document.getElementById("h1Canvas");
var cntxt = h1canvas.getContext("2d");

cntxt.moveTo(100, 150);
cntxt.lineTo(450, 50);
cntxt.lineWidth = 10;
cntxt.strokeStyle = "#ff0000";
cntxt.stroke();
};

</script>
</head>
<body>
<div><canvas id="h1Canvas" width="578" height="200"></canvas></div>
</body>

</div>

画布位于不同的div中，因为每个div在轮播中是一个不同的面板，因此它们需要放在那里而不是放在同一页面上。

Answer 1

您的HTML结构不正确，您需要这样的内容：

<html>
    <head>
        <!-- Here goes your css and js -->
    </head>
    <body>
        <!-- Here goes your html elements -->
    </body>
</html>

Answer 2

除了结构不良之外，您还拥有两个画布，它们都由相同的变量“ canvas”引用，并且两个上下文由相同的变量“ context”引用。 因此，您实际上只有一个画布和一个上下文。

编辑好，这里整理了您的代码，另外我还更改了第二个画布中的坐标，以使两个图形不会重叠。 您可以根据需要更改坐标。

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#h1Canvas {
border: 1px solid #9C9898;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var hcanvas = document.getElementById("h1canvas");
var hcontext = hcanvas.getcontext("2d");

hcontext.moveTo(100, 150);
hcontext.lineTo(450, 50);
hcontext.lineWidth = 10;

// set line color
hcontext.strokeStyle = "#ff0000";
hcontext.stroke();


var mcanvas = document.getElementById("myCanvas");
var mcontext = mcanvas.getContext("2d");

mcontext.moveTo(200, 250); //add 100 to coordinates so that two drawings do not lie on top of each other change as needed
mcontext.lineTo(550, 150);
mcontext.lineWidth = 10;

// set line color
mcontext.strokeStyle = "#ff0000";
mcontext.stroke();
};
</script>
</head>
<body>
<canvas id="h1Canvas" width="578" height="200"></canvas>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

创建另一个画布后，HTML5画布不显示

问题描述

2 个解决方案

解决方案1
1 2012-04-30 07:37:34

解决方案2
0 2012-04-30 16:01:23

创建另一个画布后，HTML5画布不显示

问题描述

2 个解决方案

解决方案1 1 2012-04-30 07:37:34

解决方案2 0 2012-04-30 16:01:23

解决方案1
1 2012-04-30 07:37:34

解决方案2
0 2012-04-30 16:01:23