HTML5：動畫畫布無法正常工作

Question

我使用以下代碼在div上動畫顯示HTML5畫布：HTML：

<div class="ls-slide" id="asb">

  <div id="smile" style="width:100%;height:359px;">

    <canvas style="position: absolute; width: 100%; z-index: 3; display: block;" height="359" width="2111">

    </canvas>

  </div>
</div>

JS：

window.onload = function() {
  travers();

  var lastHeight = $("#asb").height();



  var canvas = document.querySelector('canvas');
  ctx = canvas.getContext('2d');

  color = '#aaa';
  var check = respondCanvas();
  canvas.width = check[1];
  canvas.height = lastHeight;
  canvas.style.display = 'block';
  ctx.fillStyle = color;
  ctx.lineWidth = .1;
  ctx.strokeStyle = color;

  function respondCanvas() {
    var width = [];
    width[0] = $('#smile').width(); //max width
    width[1] = $('canvas').width(); //max width

    return width;

    //Call a function to redraw other content (texts, images etc)
  }

  function checkheight() {
    var height = $('#asb').height(); //max width
    //console.log(height);
    // return height;
  }

  var mousePosition = {
    x: 30 * canvas.width / 100,
    y: 30 * canvas.height / 100
  };

  if (canvas.width <= 1000) {
    var numdot = 100;
  } else if (canvas.width <= 800) {
    var numdot = 80;
  } else if (canvas.width <= 500) {
    var numdot = 35;
  } else {
    var numdot = 300;
  }

  var dots = {
    nb: numdot,
    distance: 70,
    d_radius: 50,
    array: []
  };

  function Dot() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.vx = -.5 + Math.random();
    this.vy = -.5 + Math.random();

    this.radius = Math.random();
  }

  Dot.prototype = {
    create: function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fill();
    },

    animate: function() {
      for (i = 0; i < dots.nb; i++) {

        var dot = dots.array[i];

        if (dot.y < 0 || dot.y > canvas.height) {
          dot.vx = dot.vx;
          dot.vy = -dot.vy;
        } else if (dot.x < 0 || dot.x > canvas.width) {
          dot.vx = -dot.vx;
          dot.vy = dot.vy;
        }
        dot.x += dot.vx;
        dot.y += dot.vy;
      }
    },

    line: function() {
      for (i = 0; i < dots.nb; i++) {
        for (j = 0; j < dots.nb; j++) {
          i_dot = dots.array[i];
          j_dot = dots.array[j];

          if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
            if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
              ctx.beginPath();
              ctx.moveTo(i_dot.x, i_dot.y);
              ctx.lineTo(j_dot.x, j_dot.y);
              ctx.stroke();
              ctx.closePath();
            }
          }
        }
      }
    }
  };

  function createDots() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i = 0; i < dots.nb; i++) {
      dots.array.push(new Dot());
      dot = dots.array[i];

      dot.create();
    }

    dot.line();
    dot.animate();
  }

  $("canvas").mousemove(function(parameter) {

    mousePosition.x = parameter.pageX - 0;
    mousePosition.y = parameter.pageY - 300;
  });

  setInterval(createDots, 1000 / 30);
};

但是，在實際操作中不起作用，並且看不到虛線動畫（我在chrome，ff中進行了檢查）。 如何解決這個問題？

演示： https : //jsfiddle.net/5pzvh8ko/

Answer 1

您可以通過給畫布標簽提供一個ID來嘗試更好，然后使用“ document.getElementById（）”來訪問您的畫布標簽，我認為這是一個更好的方法，甚至更簡單。這是一個示例： ID：

<canvas ID="canvas_id" style="position: absolute; width: 100%; z-index:3; display: block;" height="359" width="2111">

然后使用JavaScript通過這種方式訪問​​它：

    var canvas = document.getElementById("canvas_id");

這可能不是您所需要的，但您至少可以這樣嘗試。