javascript - 如何在与 html 不同的文件中编写 Paper.js 脚本?(我已按照图书馆的说明进行操作,但仍然无法正常工作)
问题描述
这看起来很傻,但很烦人。我正在使用 VScode,我正在尝试在不同的文件中编写一个 js 脚本以获得高亮语法,但它不起作用(我可以按照另一个 stackoverflow 问题中的建议更改 json 内容并将其输入内联,但我会喜欢有一个单独的文件)。
这些文件都在同一个文件夹中:
- 纸-full.js
- 圈子.js
- 圈子.html
如果我尝试使用内联脚本运行 html 页面,则 chrome 会顺利加载
内联脚本的 circles.html
圈子.html
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<link rel="stylesheet" type="text/css" href="circles.css">
<!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
但是当我尝试为这个脚本获取一个单独的文件时(如http://paperjs.org/tutorials/getting-started/working-with-paper-js/中建议的),浏览器给出错误
circles.html 和 circles.js,在不同的文件中
圈子.html
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<link rel="stylesheet" type="text/css" href="circles.css">
<!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
<script type="text/paperscript" canvas="myCanvas" src="circles.js"></script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
圈子.js
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'red';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';
浏览器提醒:
错误一:
Access to XMLHttpRequest at 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
request @ paper-full.js:13929
paper-full.js:13929
错误2:
Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js'.
at Object.request (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:13929:14)
at HTMLCollection.loadScript (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16957:10)
at HTMLCollection.forIn (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:56:11)
at Function.each (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:75:7)
at loadAll (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16974:8)
警告:
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
request @ paper-full.js:13905
我已经通过谷歌尝试了一些关于这个错误的答案,但他们都没有真正解决它,看来我正在伤害 http 协议。我应该如何解决它,我错过了什么?
解决方案
PaperScript 代码的加载与使用该<script>
标签的任何其他 JavaScript 一样,除了类型设置为 "text/paperscript" 或 "text/x-paperscript" 。代码可以是外部文件(src="URL"),也可以是内联的:
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
如果我们将内联代码复制到名为 js/myScript.js 的文件中,我们可以重写上面的示例以加载外部文件。
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas">
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
来源: http: //paperjs.org/tutorials/getting-started/working-with-paper-js/
推荐阅读
- c++ - 制作 std::vector 容量>=N 和大小=0 的最佳方法?
- r - Knitr - 更改图表中段落之间的空格失败
- java - 将 Map.Entry 列表转换为 LinkedHashMap
- c - 循环结构时报告分段错误
- angular - 不显示用户头像
- javascript - 如果列表/数组不为空,如何禁用 Angular 中的按钮?
- c# - RavenDB - 为什么 IAsyncDocumentSession 中没有 DeleteAsync 方法
- swift - 如何在swift中隐藏文本字段并自动布局约束
- cuda - 'sudo dnf install cuda' 后'which' 没有找到 cuda
- r - 如何以毫秒为单位将纪元时间转换为人类可读的时间