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

【问题标题】：HTML5 canvas does not display after creating another canvas创建另一个画布后，HTML5 画布不显示
【发布时间】：2012-05-01 21:59:19
【问题描述】：

您好，我是在这个论坛上发帖的新手，但以前用它来回答一些问题。我正在做一个学校项目，使用 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>

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

【问题讨论】：

为什么你有另一个html文档嵌套在一个div里面？？？？看起来很吓人的html
避免 div 内的 html 块...它会产生可怕的问题...
首先，您确实需要了解如何构建 HTML，然后再尝试了解您的 javascript 出了什么问题。你不应该有多个body或多个head标签。 ....该死的，我真的发布了关于 2012 年问题的建议...

标签： javascript css html canvas

【解决方案1】：

你的 HTML 结构错误，你需要这样的东西：

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

【讨论】：

我做了这些更改，但没有任何区别，这似乎是画布的问题
@user1365234 - Canvas 仅适用于更高版本的浏览器...您使用的是 IE6 之类的...？
我正在使用最新版本的 chrome，我知道画布可以正常工作，我只有两个实例，一个可以工作，另一个不能工作。
@user1365234 我们需要查看您的代码的最新版本，因为您的新版本可能仍然存在结构问题。
我所做的就是通过确保结构正确来删除 html 标签，即使它们独立工作也很好，所以我认为有两个画布元素而不是 html 结构是个问题。跨度>

【解决方案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>

【讨论】：

是的，我认为这可能是问题所在，所以我将变量更改为 canvas1 和 context1，但似乎也没有任何变化
您更改的代码显然仍然包含错误，可能是结构错误。正如我在之前的评论中所建议的那样，它将帮助您发布任何更改的代码以帮助发现错误。您可以通过将代码添加为问题的编辑来做到这一点。
感谢您花时间修改代码，我学会了如何整理代码。但是您所做的是将两个画布实例放在同一页面上，
在我的代码中，因为它们代表轮播中的两个不同的幻灯片或页面，所以我需要在两个上显示画布单独的页面不是一个，我会尝试为我的代码提供一个更好的示例，感谢您花时间提供帮助
@user1365234 您可以将 css 样式应用于“画布”，就像使用“div”一样，因此 mcanvas 将是第 1 页 hcanvas 第 2 页等。如果您想使用“div”，请使用跨度>
@user1365234 对不起，我上面的评论超时了不要使用 css 更改画布的宽度和高度，因为这些拉伸画布、顶部、左侧、可见性等都可以。如果你想使用 'div' 用 div 包围每个画布，即