Javascript MouseMove事件编码
Javascript MouseMove事件编码
提问于 2016-11-08 23:48:56
我正在试着为课堂做一个作业，基本上它必须是“互动的”。我想使用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回答 1
Stack Overflow用户
发布于 2016-11-09 01:02:21
这里是一个开始寻找答案的好地方
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40491085
复制相关文章
相似问题
腾讯云开发者
