【发布时间】：2014-02-19 06:40:51
【问题描述】：
我正在做一个游戏作为自学。
我的目标是在鼠标指针之后有一条轨迹。（有效） 但是，当我在 chrome 上打开并运行它时。 在一定的高度和宽度之后，轨迹会留在画布上而不是被擦掉。 谁能帮我解决这个问题？
这是它的小提琴：http://jsfiddle.net/Frm27/4/ 但请务必在 chrome 或任何浏览器上尝试，因为问题不在于小提琴，而在于浏览器！
我有以下代码：
var LimitedArray = function (upperLimit) {
var storage = [];
// default limit on length if none/invalid supplied;
upperLimit = +upperLimit > 0 ? upperLimit : 100;
this.push = function (item) {
storage.push(item);
if (storage.length > upperLimit) {
storage.shift();
}
return storage.length;
};
this.get = function (i) {
return storage[i];
};
this.iterateItems = function (iterator) {
var i, l = storage.length;
if (typeof iterator !== 'function') { return; }
for (i = 0; i < l; i++) {
iterator(storage[i]);
}
};
};
$(document).ready(function() {
var tail = new LimitedArray(50);
var i = 0, j = 0;
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
listening: true
});
var layer = new Kinetic.Layer({
listening: true
});
var layer = new Kinetic.Layer();
var player = new Kinetic.Circle({
x: 20,
y: 20,
radius: 6,
fill: 'cyan',
stroke: 'black',
draggable: true
});
layer.add(player);
// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
layer.removeChildren();
layer.add(player);
player.setPosition(stage.getPointerPosition());
var obj = {
x: stage.getPointerPosition().x,
y: stage.getPointerPosition().y
};
tail.push(obj);
var arr = [];
tail.iterateItems(function (p) {
arr.push(p.x, p.y);
});
var line = new Kinetic.Line({
points: arr,
stroke: 'white',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
layer.draw();
});
stage.add(layer);
});
这是html：
<!DOCTYPE html>
<html>
<head>
<title>Collision Detection</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<div id="container" style=" background:#000; margin:auto; float:left;"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/kinetic-v5.0.0.min.js"></script>
<script src="../js/main_kinetic.js"></script>
</body>
</html>
和css：
html {
color:#000;
background:#222222;
}
a {
cursor:pointer;
list-style: none;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
#container {
background:#000;
margin:auto;
cursor:none;
float:left;
}
【问题讨论】：
-
它的 A 层问题.. 谁能帮帮我？
-
可能是操作系统问题。使用 IE11、FF26 和 Chrome32 中的任何一个在 Win8 上按预期工作。我看到一个带尾巴的圆圈。如果您更快地拖动鼠标，尾巴会变得更长（因为拖动点相距更远）。如果拖得慢一点，尾巴会变短（因为拖拽点靠得更近）。
-
即使在窗口的极端情况下也能正常工作吗？
标签： javascript html html5-canvas mouseevent kineticjs