Javascript HTML5：画布动画无法运行

我使用以下代码在我的div上显示HTML5画布动画： HTML:

JS:

window.onload=function（）{
travers（）；
var lasthheight=$（“#asb”）.height（）；
var canvas=document.querySelector（'canvas'）；
ctx=canvas.getContext（'2d'）；
颜色='#aaa'；
var check=respondCanvas（）；
canvas.width=检查[1]；
canvas.height=最后高度；
canvas.style.display='block'；
ctx.fillStyle=颜色；
ctx.lineWidth=.1；
ctx.strokeStyle=颜色；
函数respondCanvas（）{
变量宽度=[]；
宽度[0]=$（“#微笑”）.width（）；//最大宽度
宽度[1]=$（'canvas'）.width（）；//最大宽度
返回宽度；
//调用函数重新绘制其他内容（文本、图像等）
}
函数checkheight（）{
var height=$（'#asb'）。height（）；//最大宽度
//控制台。原木（高度）；
//返回高度；
}
变量鼠标位置={
x:30*canvas.width/100，
y:30*canvas.height/100
};
if（canvas.width-dots.distance&&（i_-dot.y-j_-dot.y）>-dots.distance）{
如果（（i_点x-mousePosition.x）dots.d_半径和（i_点y-mousePosition.y）>dots.d_半径）{
ctx.beginPath（）；
移动到（i_点x，i_点y）；
ctx.lineTo（j_点x，j_点y）；
ctx.stroke（）；
ctx.closePath（）；
}
}
}
}
}
};
函数createDots（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（i=0；i

但是，在行动中不工作，我看不到虚线动画（我在铬，ff检查）。你怎么解决这个问题

---

演示：

您可以通过向画布标记提供一个ID，然后使用“document.getElementById（）”来访问画布标记来更好地尝试它，我认为这是一种更好的方法，甚至更简单。下面是一个示例： id为的画布标记：

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

---

这可能不是您所需要的全部，但您至少可以这样尝试。

检查了您的控制台@cswl：虚线有效，但在鼠标悬停画布中无效。

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);
};

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

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