Javascript MouseMove 事件编码答案

【问题标题】：Javascript MouseMove Event CodingJavascript MouseMove 事件编码
【发布时间】：2016-11-08 15:48:55
【问题描述】：

我正在尝试为课堂做作业，基本上它必须是“互动的”。我想使用 mousemove 语法来更改我制作的线条的颜色和大小。我在 html 文件的 div 中创建了行，并使用 getElementById 语法来创建行。

我有线条...我不知道如何让它们移动和改变颜色。我的教授给我发了代码，当鼠标移到线条上时，他让线条改变颜色。我理解代码，但我不知道当鼠标移到线条上时如何让线条随机移动和改变大小。

我是否需要为每一行创建单独的 div 以使它们移动、随机更改颜色和随机更改大小，或者我可以只做我所做的，用多行创建一个 div 并让它们做什么我想要，彼此独立？

下面是我的代码的链接！

谢谢！！！！！！

    [1]: http://codepen.io/niymil/pen/pNoOqz



     var w = 100;
var h = 500;

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

function adjustLineStyle(y, lineY) {
  var distance = Math.abs(lineY - y);
  var lightness = 100 - distance;
  // hsl makes a color HUE, SATURATION, LIGHTNESS.
  // lightness will be how far Y is from the Y of line.
  ctx.strokeStyle = "hsl(80, 70%," + lightness + "%)";
  ctx.lineWidth = 2;
};

function clear() {
  ctx.fillStyle = 'hsla(0,0%,0%,0.1)';
  ctx.fillRect(0,0,500,500);
}

var startX = 0 ;
var endX = 500 ;

function drawlines(mouseEvent) {
  var mouseY = mouseEvent.offsetY;
  startX = startX + (Math.random() -0.5) * 30;
  endX = endX + (Math.random()  - 0.5) * 30;
  ctx.strokeStyle = 'white'
  ctx.beginPath();
  ctx.moveTo(startX, mouseY);
  ctx.lineTo(endX, mouseY);
  ctx.stroke();
}

setInterval(clear,50);
document.addEventListener('mousemove', drawlines);
//draw lines as as the mouse is hovered over the lines
//the lines are supposed to change size as the mouse is hovered over the canvas
//as lines reappear, they should change color randomly

【问题讨论】：

您能否将您的代码复制/粘贴到实际问题中？当您点击问题底部的 edit 时，您可以点击小 < > 图标来完成此操作
我没有看到任何线条...我在这里遗漏了什么吗？
干得好.. 你快到了.. 只是错过了一件小事.. 尝试在某处添加$(document).ready(function(){ animateDiv(); }); 就可以了

标签： javascript jquery html canvas onmousemove

【解决方案1】：

这里是开始寻找答案的好地方

https://learn.jquery.com/using-jquery-core/document-ready/

如果您仍然卡住，也可以尝试点击答案末尾的Run 按钮

var w = 100;
var h = 500;


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


   
document.ready(function(){
    animateDiv();  
});



function makeNewPosition() {
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  return [nh, nw];
}

function animateDiv() {
  var newq = makeNewPosition();
  var oldq = $('canvas').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);
  $('canvas').animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv();
  });
};

function calcSpeed(prev, next) {
  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);
  var greatest = x > y ? x : y;
  var speedModifier = 0.1;
  var speed = Math.ceil(greatest / speedModifier);
  return speed;
}

function adjustLineStyle(y, lineY) {
  var distance = Math.min(Math.abs(lineY - y), 1000);
  var lightness = 100 - distance;
  var maxSize = 5;
  ctx.strokeStyle = "hsl(80, 70%," + lightness + "%)";
  ctx.lineWidth = maxSize * (lightness / 100);
};

function drawlines(mouseEvent) {
  var mouseY = mouseEvent.offsetY;
  for (var x = 0; x < 1000; x += 15) {
    ctx.beginPath();
    adjustLineStyle(x, mouseY);
    ctx.moveTo(500, x);
    ctx.lineTo(x, x);
    ctx.stroke();
  }
}

document.addEventListener('mousemove', drawlines);
//redraw lines as as the mouse is hovered over the existing lines
//the lines are supposed to change size as the mouse is hovered over the canvas
//as lines reappear, they should change color randomly

.name {
  font-family: Poiret One;
  color: #BC8F8F;
  font-size: 25px;
  line-height: 4px;
  border-bottom: dotted 2px;
  width: 7em;
}
body {
  background: #696969;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>

  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>

<link type="text/css" rel="stylesheet" href="index.css" />

<body>

  <div class=name>
    <p>Niyah Gonzalez</p>
    <p>2016/1/11</p>
    <p>PS-07</p>
  </div>


  <div class="canvas">
    <canvas id="canvas" width="500" height="500"></canvas>
    </br>
  </div>



  <script type="text/javascript" src="square.js"></script>

  </script>

</body>

</html>

【讨论】：