1

嗨，我是在这个论坛上发帖的新手，但以前用它来回答一些问题。我正在做一个学校项目，使用 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 都是轮播中的不同面板，因此它们需要在那里而不是放在同一页面上。

4

2 回答 2

1

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

<html>
    <head>
        <!-- Here goes your css and js -->
    </head>
    <body>
        <!-- Here goes your html elements -->
    </body>
</html>
于 2012-04-30T07:37:34.693 回答
0

除了糟糕的结构之外，您还有两个由同一个变量“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>
于 2012-04-30T16:01:23.343 回答