我正在制作游戏作为自学。
我的目标是在鼠标指针后面有一条轨迹。(这有效) 但是，当我在 chrome 上打开并运行它时。 在达到一定的高度和宽度后，轨迹保留在 Canvas 上而不是被擦掉。 谁能帮我解决这个问题吗？
这是它的 fiddle :http://jsfiddle.net/Frm27/4/ 但请在 chrome 或任何浏览器上尝试一下，因为问题不在 fiddle 上，而是在浏览器上!
我有以下代码:
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;
}
最佳答案
我在做的一个项目中遇到了和你一样的问题。
我能够在 Chrome 34.0.1847.116 m 中重现您的问题，但不能在 IE11 中重现您的问题(请参阅“问题 fiddle ”)。
这似乎是 KineticJS 4.5.3 中的一个错误，因为迁移到 KineticJS 5.1.0 似乎修复了它(请参阅“修复 fiddle ”)。
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
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);
stage.add(layer);
// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
player.setPosition(stage.getPointerPosition());
layer.draw();
});
关于javascript - Kinectisj : Issue where mouse trail remains(Layer issue)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21397577/