【发布时间】：2013-11-03 16:55:28
【问题描述】：
所以我尝试将 processing 的 PDE 文件预编译为 processing.js 的 PJS 文件，以节省带宽并能够轻松地缩小代码。
我已经尝试了很多东西，我阅读了以下两个问题及其答案：
How to precompile processingjs sketch to speed load times?
How to have multiple processing.js sketches running at the same time
但是，它没有加载，Firebug 给了我这个：
uncaught exception: PJS compile is not supported
我得到了可以读取 PDE 文件的“常规”版本，但我宁愿将这个版本用于未来的项目。
这是 HTML 代码，api.1.0.0.min.js 是 processing.js v1.4.1 api 与 html5 的全屏方法集成，它还包括 minim 并且它在“常规”版本上工作（相同的修改制作为非api版本的processing.js）。
<!DOCTYPE html>
<html>
<title>Ikben V1.01</title>
<center>
<style type="text/css">
html {overflow: hidden;}
body{margin: 0; padding: 0}
:-webkit-full-screen #IkbenCanvas{width: 100%; height: 100%;}
</style>
<head>
<canvas id="IkbenCanvas"></canvas>
</head>
<body>
<script src="../api.1.0.0.min.js" type="text/javascript"></script>
<script id="Sketch" src="ikbenweb.pjs" type="text/javascript"></script>
<script>
new Processing(IkbenCanvas, Sketch)
</script>
</body>
</center>
</html>
Apache 提供字体类型和缓存信息，所以它不在此处。
我使用 processing.js 帮助工具转换的 PJS 文件： （删除预加载的 cmets 不会改变任何内容。）
/* @pjs preload="data/a.png,data/b.png,data/c.png,data/d.png,data/e.png,data/f.png,data/g.png,data/h.png"; */
(function($p) {
var song = null;
var minim = null;
minim = new Minim(this);
var nonsense = null;
var numberOfImages = 0,
imageSize = 0,
heightCounter = 0,
widthCounter = 0;
var loopingBackground = false,
audioStarted = false;
var images = $p.createJavaArray('$p.PImage', [8]);
function setup() {
$p.textAlign($p.CENTER, $p.CENTER);
$p.imageMode($p.CENTER);
$p.frameRate(30);
numberOfImages = 3;
$p.noStroke();
nonsense = $p.loadStrings("data/text.txt");
images[0] = $p.loadImage("data/a.png");
images[1] = $p.loadImage("data/b.png");
images[2] = $p.loadImage("data/c.png");
images[3] = $p.loadImage("data/d.png");
images[4] = $p.loadImage("data/e.png");
images[5] = $p.loadImage("data/f.png");
images[6] = $p.loadImage("data/g.png");
images[7] = $p.loadImage("data/h.png");
horseSong = minim.loadFile("data/song.mp3");
}
$p.setup = setup;
function draw() {
$p.size(self.innerWidth, self.innerHeight);
if ($p.millis() > 2500) {
if (!audioStarted) {
horseSong.loop();
audioStarted = true;
}
heightCounter = $p.height;
widthCounter = $p.width;
loopingBackground = true;
while (loopingBackground) {
$p.fill($p.random(0, 255), $p.random(0, 255), $p.random(0, 255));
$p.rect(widthCounter / 10 - $p.width / 10, heightCounter / 10 - $p.height / 10, widthCounter, heightCounter);
heightCounter -= heightCounter / 10;
widthCounter -= widthCounter / 10;
if (heightCounter <= $p.height / 10) loopingBackground = false;
}
for (var i = 0; i < numberOfImages; i++) {
imageSize = $p.__int_cast($p.random($p.height / 20, $p.height));
$p.image(images[$p.__int_cast($p.random(0, images.length))], $p.random(100, $p.width - 100), $p.random(100, $p.height - 100), imageSize, imageSize);
}
$p.textSize($p.random($p.width / 50, $p.width / 5));
$p.fill($p.random(0, 255), $p.random(0, 255), $p.random(0, 255));
$p.text(nonsense[$p.__int_cast($p.random(0, nonsense.length))], $p.random(100, $p.width - 200), $p.random(100, $p.height - 200));
} else {
$p.fill(130);
$p.rect(0, 0, $p.width, $p.height);
$p.fill(0);
$p.textSize($p.width / 30);
$p.text("Press a button or click for fullscreen.", $p.width / 2, $p.height / 2);
}
}
$p.draw = draw;
function mouseClicked() {
toggleFullScreen();
}
$p.mouseClicked = mouseClicked;
function keyPressed() {
toggleFullScreen();
}
$p.keyPressed = keyPressed;
})
【问题讨论】：
标签： javascript html5-canvas processing.js