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

Question

Hi i am new to posting on this forum but have used it for some answers before. 嗨，我是刚加入这个论坛的人，但是之前曾用它作过一些解答。 I am doing a school project using HTML5, CSS and JS to make some teaching lessons. 我正在使用HTML5，CSS和JS做一个学校项目，以做一些教学课。 I am using canvas to make some interactive tools, my problem is this: i have several panels with different content on them, on one panel i am using canvas to show some images and information, i am now trying to create another canvas on a different panel but when i do this nothing is displays in the new canvas. 我正在使用画布制作一些交互式工具，我的问题是：我有几个面板上的内容不同，在一个面板上我正在使用画布显示一些图像和信息，我现在试图在另一个面板上创建另一个画布。面板，但是当我这样做时，新画布中什么也没有显示。 When i remove the old canvas code the new canvas code will display but i assume there must be a way to have them both display, help would be much appreciated i really need to get this working for school. 当我删除旧的画布代码时，将显示新的画布代码，但是我认为必须有一种方法可以同时显示它们，我非常需要帮助，我确实需要使它在学校工作。 and sorry if this is hard to understand my english is still not that great. 很抱歉，如果这很难理解，我的英语还不是很好。 here is an example of the code if it helps. 如果有帮助，下面是代码示例。

<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>

So everything in the first panel wont be displayed, but the second panel will. 因此，第一个面板中的所有内容均不会显示，但第二个面板中的将会显示。 If i remove the canvas from the second panel then the first panel will be displayed. 如果我从第二个面板中删除画布，则将显示第一个面板。

<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>

the canveses are in different div's because each div is a different panel in a carousel so they need to be there and not put onto the same page. 画布位于不同的div中，因为每个div在轮播中是一个不同的面板，因此它们需要放在那里而不是放在同一页面上。

Answer 1

Your HTML structure is wrong, you need something like this: 您的HTML结构不正确，您需要这样的内容：

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

Answer 2

Beside the poor structure you have two canvases both referred to by the same variable 'canvas' and two contexts referred to by the same variable 'context'. 除了结构不良之外，您还拥有两个画布，它们都由相同的变量“ canvas”引用，并且两个上下文由相同的变量“ context”引用。 Hence you really only have one canvas and one context. 因此，您实际上只有一个画布和一个上下文。

EDIT OK here is your code tidied up plus I have changed the coordinates in your second canvas so that the two drawings do not overlap. 编辑好，这里整理了您的代码，另外我还更改了第二个画布中的坐标，以使两个图形不会重叠。 You can change the coordinates as you wish. 您可以根据需要更改坐标。

<!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