如何将 rafael.js 和 paper.js 合并为一个 html？

Question

当我尝试在一个 html 页面中使用两个库（rafael.js 和 paper.js）时，出现了各种错误。

案例 1. 未捕获的 ReferenceError：Raphael 未定义。在文件 "rafael.js" 中，行：

var paper = Raphael(0, 0, 320, 200);

是错误的原因。但是明明是在html:

中导入的

<head>
...
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<script src="js/rafael.js" type="text/javascript"></script>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>

案例 2。paper.js 输出：未捕获错误：无法找到 ID 为 "myCanvas" 的 canvas，但 canvas 在那里。这里是 html:

<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>

当我在一个 .js 文件 ("myrafaelpaper.js") 中有 rafael 和 paper 代码时，同样的错误也发生了，尽管 myCanvas 在那里：

<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/myrafaelpaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafaelpaper.js"></script>
...
</body>

分开来说，它们工作正常。

"myrafaelpaper.js" 在这里：

//rafael.js part
var paper = Raphael(0, 0, 320, 200);
var circle = paper.circle(0, 30, 50);
circle.attr("fill", "#f00");
console.log(circle.isPointInside(50, 30));

//paper.js part
var pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
var path = new Path(pathData);
path.strokeColor = 'red';
path.strokeWidth = 5;
path.position+= new Point(100, 50);
path.segments[3].point.selected=true;

"myrafael.js"和"mypaper.js"内容类比

Answer 1

在您提到的所有情况下，myrafaelpaper.js 的脚本标签都没有关闭 (</script>)。

如何将 rafael.js 和 paper.js 合并为一个 html？

How is it possible to combine rafael.js and paper.js in one html?

javascript

paperjs

rafaeljs