1

こんにちは、このフォーラムに投稿するのは初めてですが、以前にいくつかの回答に使用したことがあります。私は、HTML5、CSS、および JS を使用して教育用のレッスンを作成する学校のプロジェクトを行っています。私はキャンバスを使用していくつかのインタラクティブなツールを作成しています。私の問題は次のとおりです。さまざまなコンテンツを含む複数のパネルがあり、1 つのパネルでキャンバスを使用して画像や情報を表示しています。別のパネルに別のキャンバスを作成しようとしています。パネルですが、これを行うと、新しいキャンバスには何も表示されません。古いキャンバスコードを削除すると、新しいキャンバスコードが表示されますが、両方を表示する方法が必要だと思います。学校でこれを機能させるために本当に必要な助けをいただければ幸いです。これが理解しにくい場合は申し訳ありませんが、私の英語はまだそれほど上手ではありません。これが役立つ場合のコードの例です。

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

したがって、最初のパネルのすべては表示されませんが、2 番目のパネルは表示されます。2 番目のパネルからキャンバスを削除すると、最初のパネルが表示されます。

<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 はカルーセル内の異なるパネルであるため、canveses は異なる 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

貧弱な構造に加えて、同じ変数 'c​​anvas' によって参照される 2 つのキャンバスと、同じ変数 'c​​ontext' によって参照される 2 つのコンテキストがあります。したがって、実際には 1 つのキャンバスと 1 つのコンテキストしかありません。

編集OKここでコードを整理し、2番目のキャンバスの座標を変更して、2つの図面が重ならないようにしました。コーディネートは思いのままに変えられます。

<!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 に答える