0

ユーザーが長方形で画像をクリップできるようにするプログラムが必要です。

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

キャンバス上の別の場所をクリックすると、プログラムがその場所で背景画像を切り取ると思っていました。ただし、リンクからわかるように、マウスをクリックするたびに画面が更新されません。背景は、最新のマウス位置で 1 つの四角形だけで切り取られると予想していました。代わりに、すべてのマウス クリックによって背景がクリッピングされているように見えます。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>
4

1 に答える 1

0

私は何が間違っているかを理解しました。プログラムを意図したとおりに動作させるには、パスの前に 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-31T20:23:19.230 に答える