javascript - Canvas 在调整大小后获取宽度和高度+更新错误

Question

我最近开始使用 Canvas 。我想在 Canvas 中移动鼠标移动元素。这不是问题，但后来我添加了调整大小功能以使其流畅。之后，即使我设置了宽度和高度， Canvas 的宽度和高度也会在调整大小后设置(因此您必须调整窗口大小以获得 Canvas 的宽度和高度，否则它没有宽度和高度)以及“眼睛” “正在离开轨道，因此 Canvas 没有清除或更新(？)，但我无法找出原因。任何帮助将不胜感激。

演示:https://jsfiddle.net/62jkx9rj/2/

JS:

    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

    var ctx,
      widthCanvas,
      heightCanvas,
      leftEye,
      rightEye,
      mouse;

    Eye = function(pos) {
      this.pos = {
        x: pos.x,
        y: pos.y
      };
      this.center = {
        x: pos.x,
        y: pos.y
      };
      this.translation = {
        x: (window.innerWidth / 2 - canvas.width / 2) + this.center.x,
        y: this.center.y
      };
    }

    Eye.prototype.draw = function() {
      ctx.beginPath();
      ctx.arc(this.pos.x, this.pos.y, 7, 0, Math.PI * 2);
      ctx.fillStyle = '#333';
      ctx.fill();

      ctx.beginPath();
      ctx.arc(this.pos.x, this.pos.y - 4, 3, 0, Math.PI * 2);
      ctx.fillStyle = '#fff';
      ctx.fill();
    }

    Eye.prototype.update = function() {
      var deltaX = mouse.x - this.translation.x;
      var deltaY = mouse.y - this.translation.y;
      var mag = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
      var angleRad = Math.atan2(deltaY, deltaX);
      var newPosX = this.center.x + 6 * Math.cos(angleRad);
      var newPosY = this.center.y + 6 * Math.sin(angleRad);
      this.pos.x += (newPosX - this.pos.x) / 5;
      this.pos.y += (newPosY - this.pos.y) / 5;
    }

    var init = function() {
      var canvas = document.getElementById("canvas");
      var $canvas = $('#canvas');
      ctx = canvas.getContext('2d');
      container = $("body");
      widthCanvas = 300;
      heightCanvas = 250;

      $(window).resize(resizeCanvas);
      function resizeCanvas() {
        widthCanvas = $canvas.attr('width', $(container).width());
        heightCanvas = $canvas.attr('height', $(container).height());

      }
      resizeCanvas();
      canvas.width = widthCanvas;
      canvas.height = heightCanvas;
      leftEye = new Eye({
        x: 130,
        y: 95
      });
      rightEye = new Eye({
        x: 160,
        y: 85
      });
      mouse = {
        x: 0,
        y: 0
      };
      bindEventHandlers();
      draw();
    }

    var draw = function() {
      ctx.clearRect(0, 0, widthCanvas, heightCanvas);
      leftEye.update();
      rightEye.update();
      leftEye.draw();
      rightEye.draw();
      requestAnimFrame(draw);
    }

    var bindEventHandlers = function() {
      document.onmousemove = function(e) {
        mouse.x = e.pageX;
        mouse.y = e.pageY;
      }
    }

    init();

Answer 1

这是工作版本:https://jsfiddle.net/62jkx9rj/6/

我已经解决了第一个问题:你有 $canvas、canvas。我删除了 $canvas:

function resizeCanvas() {
  widthCanvas = canvas.width = $(container).width();
  heightCanvas = canvas.height = $(container).height();
}

这是第二个问题的解决方案。也是因为$canvas、canvas的混淆。更改绘制的第一行:

var draw = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);