私はキャンバスをクリアするが、これは私がボタンが作成されたキャンバスをクリアするために使用しているコードです

Question

var mybuttons = document.getElementById('buttons').addEventListener('click', function(){ 
var myContext = context.clearRect(0,0, canvas.width, canvas.height); 
}, false); 

働いていないその許可ボタンを作成するには、このコードを使用しているが、それはキャンバスをクリアしません

Answer 1

あなたのコードは不完全なので、ここでどこが間違っているのか正確には分かりません。これは、イベントリスナーがアタッチされないようにする変数名の不一致の場合もあります。それにかかわらず、ここでは、ボタンを使用してキャンバス要素をクリアし、うまくいけば正しい方向に向ける作業例を示します。

var canvas = document.getElementById('canvasA'); 
 
var context = canvas.getContext("2d"); 
 
context.moveTo(25, 25); 
 
context.lineTo(275, 275); 
 
context.stroke(); 
 
context.moveTo(25, 275); 
 
context.lineTo(275, 25); 
 
context.stroke(); 
 

 
var mybuttons = document.getElementById('buttons'); 
 
mybuttons.addEventListener('click', function() { 
 
    var canvas = document.getElementById('canvasA'); 
 
    var context = canvas.getContext("2d"); 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
}, false);

<canvas id="canvasA" height="300px" width="300px" style="border:1px solid black"></canvas> 
 
<br /> 
 
<input type="button" id="buttons" value="Clear" />