ボタンが付いたHTML5クリーンキャンバス

私はこのjavascriptコードを持っています。ボタンをクリックするとキャンバスがきれいになります。ボタンが付いたHTML5クリーンキャンバス

しかし、私は、マウスを移動すると、キャンバスは、私が以前に書いたものを私に示しており、それは空白のキャンバスで始まらない

私は、ボタンをクリックした後、空白のキャンバスで始めるために何ができますか？

ありがとうございます。

<!DOCTYPE html> 
<html> 
<body> 

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
    Your browser does not support the HTML5 canvas tag.</canvas> 
    <div id="buttons"> 
     <input type="button" id="clear" value="Clear"> 
     <input type="button" onClick="erase()" value="Erase"> 
    </div> 



    <script> 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 

     function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return { 
      x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top 
     }; 
     } 

     canvas.addEventListener('mousemove', 
           function(evt){ 
            var mousePos = getMousePos(canvas, evt); 
            ctx.clearRect(0, 0, canvas.width, canvas.height); 
            ctx.strokeStyle = 'red'; 
            ctx.lineTo(mousePos.x,mousePos.y); 
            ctx.stroke(); 
           } 

    ); 

     document.getElementById('clear').addEventListener('click', function(){ 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     }, false); 


    function erase(){ 
     ctx.clearRect(0, 0, canvas.width, canvas.height);  
    } 

    </script> 

</body> 
</html>

出典

2017-03-12 andrea

すべてのエラーをクリアするためにbeginPath()を使用することを覚えていますか？つまり、 'context'については未定義ですか？ –

はい：D気を散らす...私は気づいて、今私の質問を修正します。しかし、今私は別の質問があります：私はマウスを動かすと、キャンバスは前に書いたことを示し、空白のキャンバスから始まらない。私はボタンをクリックした後、空白のキャンバスから始めたいのですが？ – andrea

もclearRect()が使用された後に存在する静止画のパス、例えば：**開発**ツールのコンソールで

function(evt){ 
    var mousePos = getMousePos(canvas, evt); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.strokeStyle = 'red'; 

    ctx.beginPath();  // <- here 
    //ctx.moveTo(x, y); // you will probably also want this at some point 

    ctx.lineTo(mousePos.x,mousePos.y); 
    ctx.stroke(); 
}

出典

2017-03-12 01:38:01 K3N

ありがとう！それは今働く：D – andrea

ボタンが付いたHTML5クリーンキャンバス

答えて

関連する問題