Javascript MouseMove Кодирование событий

Question

Я пытаюсь выполнить задание для класса и в основном он должен быть «интерактивным». Я хочу использовать синтаксис mousemove для изменения цвета и размера строк, которые я создал. Я сделал свои строки в div в моем html-файле и сделал синтаксис 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 

Answer 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>