Question

我想要选择窗口桌面，如下图所示，然后使用我的canvas代码。

我是画布上的新手，我假设用requestAnimationFrame绘制图像与clearRect ()相同，从而消除了之前绘制的矩形。

我的问题是所有以前的矩形都没有被删除，怎么能实现呢？

我的代码：

＆＃13;

window.addEventListener("load", _init);

function _init(w = window, d = document) {
  var canvas = d.getElementsByTagName("CANVAS")[0],
      ctx = canvas.getContext("2d");

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var cW = canvas.width,
          cH = canvas.height,
          flag = 0,
          obj = {
            initX: null,
            initY: null,
            curX: null,
            curY: null
          };

          canvas.addEventListener("mousedown", e => {
            flag = 1;
            obj.initX = e.clientX;
            obj.initY = e.clientY;
          });
          canvas.addEventListener("mouseup", e => {
            console.log("Mouseup!");
            flag = 0;
          });
          canvas.addEventListener("mousemove", e => {
            if(flag === 1) {
               flag = 2;
            }
            if(flag === 2) {
            obj.curX = e.clientX;
            obj.curY = e.clientY;
            }
          });
  function scene() {
    drawBackground();
    if(flag === 2) drawRectangle(obj);
    requestAnimationFrame(scene);
  }
  function drawBackground() {
    var image = new Image();
        image.src = "http://wallpaperswide.com/download/background_logon_default_windows_7-wallpaper-1920x1200.jpg";
        image.onload = _ => {
        ctx.drawImage(image, 0, 0, cW, cH);
        };
  }
  function drawRectangle(data) {
    ctx.save();
    ctx.strokeStyle = "rgba(48, 242, 62, 0.75)";
    ctx.moveTo(data.initX, data.initY);
    ctx.lineTo(data.curX, data.initY);
    ctx.lineTo(data.curX, data.curY);
    ctx.lineTo(data.initX, data.curY);
    ctx.lineTo(data.initX, data.initY);
    ctx.stroke();
    ctx.restore();
  }
  requestAnimationFrame(scene);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> Square Generator </title>
  <script src="square.js"></script>
  <style>
  body,html {
    padding: 0; border: 0; margin: 0; top: 0; left: 0; overflow: hidden;
  }
  </style>
</head>
<body>
  <canvas></canvas>
</body>
</html>

＆＃13;

Answer 1

您需要调用ctx.beginPath()函数

Canvas 2D API的CanvasRenderingContext2D.beginPath（）方法通过清空子路径列表来启动新路径。如果要创建新路径，请调用此方法。

//Call that function within your `drawRectangle`logic
function drawRectangle(data) {
    ctx.beginPath();
    ctx.strokeStyle = "rgba(48, 242, 62, 0.75)";
    ....
}

window.addEventListener("load", _init);

function _init(w = window, d = document) {
  var canvas = d.getElementsByTagName("CANVAS")[0],
    ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  var cW = canvas.width,
    cH = canvas.height,
    flag = 0,
    obj = {
      initX: null,
      initY: null,
      curX: null,
      curY: null
    };

  canvas.addEventListener("mousedown", e => {
    flag = 1;
    obj.initX = e.clientX;
    obj.initY = e.clientY;
  });
  canvas.addEventListener("mouseup", e => {
    flag = 0;
  });
  canvas.addEventListener("mousemove", e => {
    if (flag === 1) {
      flag = 2;
    }
    if (flag === 2) {
      obj.curX = e.clientX;
      obj.curY = e.clientY;
    }
  });

  function scene() {
    drawBackground();
    if (flag === 2) drawRectangle(obj);
    requestAnimationFrame(scene);
  }

  function drawBackground() {
    var image = new Image();
    image.src = "http://wallpaperswide.com/download/background_logon_default_windows_7-wallpaper-1920x1200.jpg";
    image.onload = _ => {
      ctx.drawImage(image, 0, 0, cW, cH);
    };
  }

  function drawRectangle(data) {
    ctx.beginPath();
    ctx.strokeStyle = "rgba(48, 242, 62, 0.75)";
    ctx.moveTo(data.initX, data.initY);
    ctx.lineTo(data.curX, data.initY);
    ctx.lineTo(data.curX, data.curY);
    ctx.lineTo(data.initX, data.curY);
    ctx.lineTo(data.initX, data.initY);
    ctx.stroke();
    ctx.restore();
  }
  requestAnimationFrame(scene);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> Square Generator </title>
  <script src="square.js"></script>
  <style>
    body,
    html {
      padding: 0;
      border: 0;
      margin: 0;
      top: 0;
      left: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas></canvas>
</body>

</html>

为什么最后一个矩形不会被删除？

1 个答案: