Javascript - интерактивное отсечение не обновляет экран

мне нужно иметь программу, которая позволяет пользователю обрезать изображение с прямоугольником:Javascript - интерактивное отсечение не обновляет экран

https://jsfiddle.net/w3qfLr10/58/

я ожидал, что, когда я нажал на разных местах на холсте , программа скопирует фоновое изображение в этом месте. Однако, как вы можете видеть из ссылки, каждый раз при нажатии мыши экран не обновляется. Я ожидал, что фон будет обрезаться только одним прямоугольником в последнем месте мыши; вместо этого кажется, что фон обрезается всеми щелчками мыши. Thanks

Вот мой код:

<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

не может видеть вещь в скрипке, на самом деле - неважно, там –

Я понял, что был неправ. Чтобы программа работала так, как я ее намеревался вести, мне просто нужно добавить 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 - интерактивное отсечение не обновляет экран

ответ

Смежные вопросы