Question

我试图做一个愚蠢的事情：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只有天空，没有香肠。很伤心。

有什么想法吗？

Answer 1

我不能肯定地说，但我怀疑当你在本地运行时，paper.js或saucisse.js都没有加载。可能是因为文件丢失或位置错误。

另一种可能性是服务器paper.js是paper-full.js，而本地文件是paper-core.js。如果是这样的话，两个文件都会加载，但是由于没有加载起稿特征，因此saucisse脚本会失败。

我确实在HTML文件中嵌入了saucisse.js并引用了一个我认为正确并且使用Chrome，IE和Firefox在本地运行的纸张版本。我不知道为什么Firefox运行正常。也许Firefox在你做出改变破坏事情之前有一个已经打开正确工作版本的标签？如果是这样，它将继续有效，直到您重新加载页面。

Paper.js - 与Chrome和IE的兼容性

1 个答案: