Javascript MouseMove事件编码

Question

I am trying to do an assignment for class and basically it has to be "interactive". 我正在尝试为课堂布置作业，并且基本上必须是“互动式”的。 I want to use the mousemove syntax to change the color and size of the lines that I made. 我想使用mousemove语法更改我制作的线条的颜色和大小。 I made my lines in a div in my html file and did the getElementById syntax to make the lines. 我在html文件的div中创建了行，并执行了getElementById语法来创建行。

I have the lines...I don't know how to make them move and change color. 我有线条...我不知道如何使它们移动并改变颜色。 My professor sent me code and he made the lines change color as the mouse moved over them. 我的教授给我发送了代码，当鼠标移到它们上方时，他使线条变为彩色。 I understand the code but I don't know how to make the lines move and change size randomly when the mouse is moved over them. 我了解代码，但不知道如何在鼠标移到行上方时随机移动行和更改大小。

Do I need to create individual div's for each line to make them move, change color randomly, and change size randomly independently of one another or can I just do what I did, make one div with multiple lines and make them do what I want, independently of each other? 我是否需要为每行创建一个单独的div，以使其相互独立移动，随机改变颜色和随机改变大小，还是可以做我所做的事情，使一个div有多行，并使它们按我的意愿进行，彼此独立？

Here is a link to my code below! 这是下面我的代码的链接！

Thank you!!!!! 谢谢！！！！！

    [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

Answer 1

here is a good place to start looking for answers 这是开始寻找答案的好地方

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

Also try hitting the Run button at the end of the answer if you're still stuck 如果您仍然被卡住，也尝试点击答案末尾的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>

Javascript MouseMove事件编码

问题描述

1 个解决方案

解决方案1
0 2016-11-08 17:02:21

Javascript MouseMove事件编码

问题描述

1 个解决方案

解决方案1 0 2016-11-08 17:02:21

解决方案1
0 2016-11-08 17:02:21