javascriptの - インタラクティブなクリッピングは、私は、ユーザーが長方形で画像をクリップすることを可能にするプログラムを持っている必要があり、画面

を更新していない：私はキャンバス上の別の場所をクリックしたときjavascriptの - インタラクティブなクリッピングは、私は、ユーザーが長方形で画像をクリップすることを可能にするプログラムを持っている必要があり、画面

私がいることを期待しましたプログラムはその場所の背景画像をクリップします。ただし、リンクから見ると、マウスをクリックするたびに画面は更新されません。私はバックグラウンドが最新のマウス位置にある1つの矩形でのみクリップされることを期待しました。代わりに、背景がすべてのマウスクリックでクリップされているようです。私が間違っていたものを考え出し

<html> 
    <head> 
     <style> 
      body { 
       margin: 0px; 
       padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 

    <canvas id='myCanvas' width="480" height="320"> </canvas> 

    <script > 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 
     var rectX = 75; 
     var rectY = 60; 

     function draw() { 
      context.clearRect(0,0, canvas.width, canvas.height); 
      context.beginPath(); 
      context.rect(rectX, rectY, 250, 180); 
      context.clip(); 
      context.drawImage(imageObj, 69, 50); 
     }; 

     imageObj.onload = function() { 
      draw(); 
      canvas.onmouseup = function(e) { 
       rectX = e.x; 
       rectY = e.y; 
       draw(); 
      }; 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 



     </script> 

    </body> 
</html>

出典

2016-10-28 long

実際には気にしないでください、そこにあります –

：Thanks

は、ここに私のコードです。プログラムの動作を意図したとおりにするには、パスの前にcontext.save（）を追加し、描画の後にcontext.restore（）を追加するだけです。だから、新しいコードは次のようになります：

.... 
     context.clearRect(0,0, canvas.width, canvas.height); 
     context.save(); //new code 
     context.beginPath(); 
     context.rect(rectX, rectY, 250, 180); 
     context.clip(); 
     context.drawImage(imageObj, 69, 50); 
     context.restore();//new code

出典

2016-10-31 20:23:19 long

javascriptの - インタラクティブなクリッピングは、私は、ユーザーが長方形で画像をクリップすることを可能にするプログラムを持っている必要があり、画面

答えて

関連する問題