캔버스 지우기 버튼

Question

캔버스를 지우는 버튼을 만들려고했지만 성공하지 못했습니다. 이

JS

function clearcanvas1(){ 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
var w = canvas.width; canvas.width = 1; canvas.width = w; 
} 

HTML에 대한

내 코드는

<button onmouseover="clearcanvas1()">clear</button> 

나는 그런

canvas.width = canvas.width; 

및

같은 다른 옵션을 시도

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

현재로서는 location.reload 기능에 대해 지우기 버튼을 대체했지만, 독립적으로 작동하려는 동일한 페이지에 보조 캔버스를 뒤집습니다. 어떻게해야합니까? 분명히

당신은 당신의 함수 내에서 canvas 요소를 받고 (또는 참으로 컨텍스트) 수하지 않는 것

Answer 1

...

function clearcanvas1() 
{ 
    var canvas = document.getElementById('canvas'), 
     ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
} 

, 당신은에 대한 올바른 ID를 나타 내기 위해 document.getElementById()를 업데이트해야합니다 당신의 마크 업을 사용하거나 document.getElementsByTagName()을 사용할 수 있습니다. 버튼에

Answer 2

는 아래의 기능이 당신을 도울 것입니다

function clearall() 
{ 
    var canvas=document.getElementById("canvas+id"); 
    var context=canvas.getContext("2d"); 
    context.clearRect(0,0,canvas.width,canvas.height); 
} 

희망을 호출합니다. 이 함수가 캔버스의 모든 것을 지우는 것을 알아 두십시오.