創建另一個畫布后，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