我试图做一个愚蠢的事情:HTML页面上的飞香肠。 我试图从Paper.js做到这一点 http://paperjs.org/
这是HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SkyWurst</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper.js">
</script>
<!--Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="saucisse.js" canvas="myCanvas">
</script>
</head>
<body>
<canvas id="myCanvas" width="1600" height="900"
id="tools_sketch" width="1600" height="900"
style="background: url(sky.jpg) no-repeat center center;">
</canvas>
</body>
</html>
这是saucisse.js
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
// The amount of points in the path:
var points = 10;
// The distance between the points:
var length = 25;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 70,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
function onMouseMove(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth();
}
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
sky.jpg,paper.js,saucisse.js和saucisse.html在同一个文件夹中
Firefox的一切都很好,但Chrome和IE只有天空,没有香肠。很伤心。
有什么想法吗?
答案 0 :(得分:0)
我不能肯定地说,但我怀疑当你在本地运行时,paper.js或saucisse.js都没有加载。可能是因为文件丢失或位置错误。
另一种可能性是服务器paper.js是paper-full.js,而本地文件是paper-core.js。如果是这样的话,两个文件都会加载,但是由于没有加载起稿特征,因此saucisse脚本会失败。
我确实在HTML文件中嵌入了saucisse.js并引用了一个我认为正确并且使用Chrome,IE和Firefox在本地运行的纸张版本。我不知道为什么Firefox运行正常。也许Firefox在你做出改变破坏事情之前有一个已经打开正确工作版本的标签?如果是这样,它将继续有效,直到您重新加载页面。