HTML-код анимации на холсте не работает

Question

Я написал код ниже для запуска в html5, но, похоже, он не работает. Код ниже должен выполняться, когда пользователь нажимает на холст. Я просто не могу понять, в чем здесь проблема. Насколько я могу судить, все остальное кажется правильным:

var ctr = document.getElementById("canvas").getContext("2d");

function sol86() {
  var ctx = d3.select('#lines')
    .append('ctx')
    .attr("width", "100%")
    .attr("height", "100%");



  function lineData() {
    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }
    var data = new Array();
    var id = 1;
    var ww = window.innerWidth; // Width of the window viewing area
    var wh = window.innerHeight; // Height of the window viewing area
    // iterate for cells/columns inside rows
    for (var line = 0; line < 1000; line++) { // 1000 lines
      var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
      var y1 = getRandomArbitrary(-50, wh);
      data.push({
        id: id, // For identification and debugging
        x1: x1,
        y1: y1,
        x2: x1 + 50, // Move 100 to the right
        y2: y1 + 50, // Move 100 up
        rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
      })
      id++;
    }
    return data;
  }

  var lineData = lineData();
  console.log(lineData);


  var line = ctx.selectAll("line")
    .data(lineData)
    .enter().append('line')
    .attr("id", function(d) {
      return d.id;
    })
    .attr("x1", function(d) {
      return d.x1;
    })
    .attr("y1", function(d) {
      return d.y1;
    })
    .attr("transform", function(d) {
      return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";
    })
    .attr("x2", function(d) {
      return d.x1;
    })
    .attr("y2", function(d) {
      return d.y1;
    }).transition().delay(function(d, i) {
      return 1.5 * i;
    }).duration(750)
    .attr("x2", function(d) {
      return d.x2;
    })
    .attr("y2", function(d) {
      return d.y2;
    });
}

// run on load

$(document).ready(function(event) {
  $(window).on("click", function(event) {
    d3.selectAll("ctr").remove();
    sol86();
  });
});



$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
  d3.selectAll("ctr").remove();
  sol86();
});

body {
  margin: 0;
}

.drawing {
  margin: 0;
}

#lines {
  width: 100%;
  height: 100%;
}

line {
  stroke: #111;
  stroke-width: 1;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<canvas id='canvas' width='1000' height='1000'></canvas>
<div class="drawing">
  <div id="lines"></div>
</div>

Может ли кто-нибудь здесь помочь мне решить эту проблему, пожалуйста?

Answer 1

Вы создаете странные теги <ctx> вместо тегов <svg>. Я изменил это. У холста есть фон, чтобы я мог его увидеть и щелкнуть по нему. Также я сделал это меньше. Надеюсь, это поможет.

var ctr = document.getElementById("canvas").getContext("2d");

function sol86() {
 var ctx = d3.select('#lines')
.append('svg')
.attr("width", "100%")
.attr("height", "100%");



  function lineData() {
    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }
    var data = new Array();
    var id = 1;
    var ww = window.innerWidth; // Width of the window viewing area
    var wh = window.innerHeight; // Height of the window viewing area
    // iterate for cells/columns inside rows
    for (var line = 0; line < 1000; line++) { // 1000 lines
      var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
      var y1 = getRandomArbitrary(-50, wh);
      data.push({
        id: id, // For identification and debugging
        x1: x1,
        y1: y1,
        x2: x1 + 50, // Move 100 to the right
        y2: y1 + 50, // Move 100 up
        rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
      })
      id++;
    }
    return data;
  }

  var lineData = lineData();
  //console.log(lineData);


  var line = ctx.selectAll("line")
    .data(lineData)
    .enter().append('line')
    .attr("id", function(d) {
      return d.id;
    })
    .attr("x1", function(d) {
      return d.x1;
    })
    .attr("y1", function(d) {
      return d.y1;
    })
    .attr("transform", function(d) {
      return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";
    })
    .attr("x2", function(d) {
      return d.x1;
    })
    .attr("y2", function(d) {
      return d.y1;
    }).transition().delay(function(d, i) {
      return 1.5 * i;
    }).duration(750)
    .attr("x2", function(d) {
      return d.x2;
    })
    .attr("y2", function(d) {
      return d.y2;
    });
}

// run on load

$(document).ready(function(event) {
  $(window).on("click", function(event) {
    d3.selectAll("ctr").remove();
    sol86();
  });
});



$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
  d3.selectAll("ctr").remove();
  sol86();
});

body {
  margin: 0;
}

.drawing {
  margin: 0;
}

#lines {
  width: 100%;
  height: 100%;
}

line {
  stroke: #111;
  stroke-width: 1;
}

canvas{background:#d9d9d9;}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<canvas id='canvas' width='1000' height='50%'></canvas>
<div class="drawing">
  <div id="lines"></div>
</div>

UPDATE

ОП не хочет SVG-элементов, он хочет нарисовать линии на холсте. Я удалил весь персонал d3, стиль SVG и ненужные части из HTML. Из ее / ее кода я использую только функцию lineData (), которая создает случайные данные, используемые для рисования линий. Линии рисуются при нажатии и изменении размера.

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let ww = (canvas.width = window.innerWidth);
let wh = (canvas.height = window.innerHeight);
let rid = null;
let length = 0;

function lineData() {
  function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }

  var data = new Array();
  //var id = 1;
  //var ww = window.innerWidth; // Width of the window viewing area
  //var wh = window.innerHeight; // Height of the window viewing area
  // iterate for cells/columns inside rows
  for (var line = 0; line < 1000; line++) {
    // 1000 lines
    var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
    var y1 = getRandomArbitrary(-50, wh);
    data.push({
      //id: id, // For identification and debugging

      x1: x1,
      y1: y1,
      //x2: x1 + 50, // Move 100 to the right
      //y2: y1 + 50, // Move 100 up
      rotate: getRandomArbitrary(0, 2 * Math.PI) // Pick a random angle between 0 and 360
    });
    //id++;
  }
  return data;
}

let linedata = lineData();
//console.log(linedata)

function drawLine(l) {
  ctx.save();
  ctx.rotate(l.rotate);
  ctx.translate(l.x1, l.y1);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(length, length);
  ctx.stroke();
  ctx.restore();
}

function Draw() {
  rid = requestAnimationFrame(Draw);
  length++;

  if (length <= 50) {
    ctx.clearRect(0, 0, ww, wh);
    linedata.map(l => {
      drawLine(l);
    });
  } else {
    if (rid) {
      cancelAnimationFrame(rid);
      rid = null;
    }
  }
}

function Init() {
  if (rid) {
    cancelAnimationFrame(rid);
    rid = null;
  }
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
  length = 0;
  linedata = lineData();
  Draw();
}

canvas.addEventListener("click", Init, false);

window.setTimeout(function() {

  window.addEventListener("resize", Init, false);
}, 15);

canvas{background:#d9d9d9;}

<canvas id='canvas'></canvas>