processing.js loadImage()
我做了一个processing.js网页，用来放一个platformer游戏，所以我已经计划好了代码。现在我只需要把它放到网页上。现在我可以将背景设置为红色，但是当我把代码放进去的时候，我意识到它没有绘制任何图像。我查了一下，processing.js使用的图像方法与我所做的非常不同。它还是不能工作。
下面是我在HelloWeb.pde文件中的processing.js代码：
preload =
"file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png";//请注意，E驱动器是我的USB。我不知道这会不会有效果？
//AI Codes
int wolfX = 310;
int wolfY = 200;
int wolfHealth = 50;
//Health
int kingHealth = 100;
int dragon = 500;
//LV design
int floorHeight = 300;
int lvlNum = 1;
//movement (x)
int maxSpeed = 6.25;
int xForce = 0;
int kingXPos = 947.5;
//movement (y)
int kingYPos = floorHeight + 50;
int yForce = -15;
int jumping = false;
void setup() {
size(1895, 800);
background(255, 0, 0);
}
void draw() {
if (lvlNum != 0) {
PImage kingIdle = loadImage("file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png")
}
};和HTML：
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas data-processing-sources="HelloWeb.pde" width="1895" height="800" style="border:4px solid"></canvas>
</body>
</html>回答 1
Stack Overflow用户
发布于 2016-08-03 06:42:31
你应该养成张贴MCVE的习惯。试着把你的问题缩小到尽可能少的行数。例如，下面的代码演示了您的问题：
/* @pjs preload="C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG"; */
PImage myImage;
void setup(){
size(200,200);
myImage = loadImage("C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG");
}
void draw(){
image(myImage, 50,50, 100,100);
}您还应该养成查看JavaScript控制台的习惯。在那里你会看到你得到的任何错误。如果您查看那里，您应该会看到一个显示为"(index):1 Not allowed to load local resource"的错误。
这个错误说明了一切。您不允许从网页访问本地文件，即使您在本地运行该网页。
您的Processing.js网页正由本地Your服务器提供服务。Processing会为你处理这些，这很好，但是‘ve服务器只能访问你已经导入到你的草图目录中的文件。通过Processing编辑器中的草图菜单执行此操作，或者您可以手动将data文件夹添加到草图目录中，然后将图像放入其中。然后只需参考与草图相关的图像。
我的示例代码中的两行代码将发生更改：
/* @pjs preload="Sky4.JPG"; */
myImage = loadImage("Sky4.JPG");如果你不想把你的图片放在你的草图目录中，那么你必须使用你自己的own服务器。你可以在本地运行一个，或者你可以把你的图片上传到图片主机上，然后在你的代码中使用url。
https://stackoverflow.com/questions/38730666
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号