1
キャンバスをクリアしてから同じボタンをクリックすると同時に新しいシェイプを描画します。 「ドローイングシェイプ」は私が使用しているボタンで、与えられたパラメータの形状を描きます。今度はもう一度ページをリロードせずに他の形状を選択し、もう一度ボタンをクリックすると、既存の形状がクリアされ、新しい形状のみが表示されます。しかし、既存の形状よりも新しい形状を上書きしています。誰かが何をやっているのかを明記することはできますか？単一ボタンで使用するとcontext.clearRect（x、y、width、height）が機能しません
コード：
<!DOCTYPE html>
<html>
<title>Blue Orchids School</title>
<head align="centre"><b>Blue Orchids School</b></head>
<body>
<button onclick="draw()" type="submit">Draw shape</button><br><br>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p id="details"></p>
<script>
function draw() {
rendershape("Circle", 4, 22, 5, "Red")
rendershape("Circle", 4, 220, 5, "Red")
}
function rendershape(shape, width, xcoordinate, ycoordinate, colour)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
//To draw a circle
if(shape=='Circle'||shape=='circle')
{
ctx.lineWidth=width;
ctx.arc(xcoordinate,ycoordinate,50,0,2*Math.PI);
ctx.fillStyle= colour;
ctx.fill();
ctx.stroke();
}
document.getElementById("details").innerHTML += 'Shape: ' + shape + '<br>' + 'Colour : '+ colour + '<br>' +' X-coordinate: '+ xcoordinate + '<br>' +' Y-coordinate: '+ ycoordinate + '<br>' + ' Width: '+ width;
}
</script>
</body>
</html>
キャンバスのDOM要素はどこですか？あなたのHTMLコードがすべて含まれていないようです。 canvas要素を取得する変数** c **はコンソールが正しくログアウトしますか？ – Shakespeare
私はそれを追加しました。貼り付けコードをコピーしている間に「HTML5キャンバスタグをサポートしていません」というメッセージが表示されます。 as： はい、console.logにはC変数 – Sarang
が表示されています[clearRect関数の重複の可能性はキャンバスをクリアしません]（http://stackoverflow.com/questions/13435959/clearrect-function-doesnt-clear-the -canvas） – Nickolay