HTML画布延迟

Question

So I've created a canvas that when you hover your mouse over top of it a green 32x32 box appears. The canvas is very large so you could draw massive portraits, the problem is that drawing the green box has made the canvas and my whole browser laggy.

The part that I added that made it laggy:

function makeTileCover(mousex, mousey) {
    ctx.strokeStyle = "green";
    ctx.strokeRect(mousex, mousey, 32, 32);
    ctx.stroke();
}

I'm guessing that there's some simple answer to fix this, it seems like it might be drawing too many times because the square gets darker the more you hover over it all though I'm not sure that that would fix it anyway.

 var canvas = document.getElementById("MapEditor"); var ctx = canvas.getContext("2d"); function updateCanvas() { container = document.getElementById("container"); if (container.width != window.innerWidth) { container.style.width = window.innerWidth - 250; } if (container.height != window.innerHeight) { container.style.height = window.innerHeight; } } //Destroy mouse on canvas exit. canvas.addEventListener('mouseout', function() { document.body.style.cursor = 'auto'; }); 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); var mousex = Math.round(mousePos.x / 32) * 32; var mousey = Math.round(mousePos.y / 32) * 32; var cursor = document.createElement('canvas'), cursorctx = cursor.getContext('2d'); cursor.width = 32; cursor.height = 32; makeTileCover(mousex, mousey); document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto'; document.getElementById('mousePosLocation').innerHTML = "Mouse location:" + "<b id='mousex'>" + mousex + "</b>" + "," + "<b id='mousey'>" + mousey + "</b>"; }, false); function makeTileCover(mousex, mousey) { ctx.strokeStyle = "green"; ctx.strokeRect(mousex, mousey, 32, 32); ctx.stroke(); } 

 canvas { background-color: black; } 

 <div id="container"> <canvas width="16384" height="16384" id="MapEditor"></canvas> </div> 

Answer 1

You're doing way too much on MouseMove, which could fire MANY times per frame, and can occur at ANY time of the frame.

On input events, you want to do as LITTLE as possible.

I think you'd be able to get away with just doing:

 canvas.addEventListener('mousemove', function(evt) {
   //I'm attaching it to Window for now. Ideally, you'd use a private namespace.
   window.mousePos = getMousePos(canvas, evt);
 }, false);

Just set one variable and move on.

Everything else should be associated with the callback triggered by requestAnimationFrame() . That way, the mouse position will update with every mouse move, but the draw will only happen once per frame, taking the most recent mouse position.

function draw() {
  window.requestAnimationFrame(draw);

  var mousex = Math.round(mousePos.x / 32) * 32;
  var mousey = Math.round(mousePos.y / 32) * 32;
  var cursor = document.createElement('canvas'),
    cursorctx = cursor.getContext('2d');

  cursor.width = 32;
  cursor.height = 32;

  makeTileCover(mousex, mousey);

  document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
  document.getElementById('mousePosLocation').innerHTML = "Mouse location:" + "<b id='mousex'>" + mousex + "</b>" + "," + "<b id='mousey'>" + mousey + "</b>";
}

As an added benefit, good browsers will will also happen as early in the frame as the browser can manage. This means that your long running code will happen as FAR AWAY from the frame being presented as possible (giving this heavy code the longest time possible to calculate before the monitor needs it, unlike the mousemove event which could happen a fraction of a millisecond before the monitor needs it).

Answer 2

The problem is your canvas is way too big and chrome can't handle the memory required for it. You really never want the canvas to be bigger than what can fit on the screen. (Typically going to be around 1080x1920). Combining that with @ScottMichaud 's answer we get

HTML

<div id="container">
   <canvas width="1638" height="900" id="MapEditor"></canvas>
</div>

JS

 var canvas = document.getElementById("MapEditor");
  var ctx = canvas.getContext("2d");
  var MousePos = {x:0, y:0};
  function updateCanvas() {
    container = document.getElementById("container");
    if (container.width != window.innerWidth) {
      container.style.width = window.innerWidth - 250;
    }
    if (container.height != window.innerHeight) {
      container.style.height = window.innerHeight;
    }
  }

  //Destroy mouse on canvas exit.
  canvas.addEventListener('mouseout', function() {
    document.body.style.cursor = 'auto';
  });
  function Update(){
    window.requestAnimationFrame(Update);
    var mousex = Math.round(MousePos.x / 32) * 32;
    var mousey = Math.round(MousePos.y / 32) * 32;
    ctx.fillRect(0,0,canvas.width,canvas.height);
    makeTileCover(ctx, mousex, mousey);
  }
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

  canvas.addEventListener('mousemove', function(evt) {
    MousePos = getMousePos(canvas, evt);

    // var cursor = document.createElement('canvas'),
    //   cursorctx = cursor.getContext('2d');

    // cursor.width = 32;
    // cursor.height = 32;

    // makeTileCover(mousex, mousey);

    // document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
    // document.getElementById('mousePosLocation').innerHTML = "Mouse location:" + "<b id='mousex'>" + mousex + "</b>" + "," + "<b id='mousey'>" + mousey + "</b>";
  }, false);

  function makeTileCover(ctx, mousex, mousey) {
    ctx.strokeStyle = "green";
    ctx.strokeRect(mousex, mousey, 32, 32);
    ctx.stroke();
  }
  Update();

I also changed the canvas so every frame it refills the canvas to black so you don't get a bunch of squares populating the view and only have the one for where the cursor is.