Question

我想用processing.js操纵像素。我想在纯JavaScript中这样做，但我遇到了困难。以下简单案例失败

<canvas id="canvas1"></canvas>
<script type="text/javascript">

function sketchProc(p){

// Configure page and init variables
function setup() {
    p.size(300, 300);
    console.log(p.pixels)
    p.background(100,200,100)
}

function draw() {
    p.loadPixels();
    for (var i = 0; i < 3000 ; i++) {
      p.pixels[i] = p.color(0,0,0)
    }
    p.updatePixels();
}

// Attach functions to processing object
    p.setup = setup;
    p.draw = draw;
}

var canvas = document.getElementById("canvas1")
var processingInstance = new Processing(canvas, sketchProc)
</script>

（我相信）应该将前3000个像素转换为黑色。查看p.pixels的console.log我想知道这种类型的数组访问是否在纯javascript中失败？任何建议欢迎并提前感谢。

Answer 1

这是因为您必须将功能直接附加到p：

function sketchProc(p){

    // Attach functions to processing object
    p.setup = function setup() {
        p.size(300, 300);
        console.log(p.pixels);
        p.background(100,200,100);
    };

    p.draw = function draw() {
        p.loadPixels();
        for (var i = 0; i < 3000 ; i++) {
          p.pixels[i] = p.color(0,0,0);
        }
        p.updatePixels();
    };
}

var canvas = document.getElementById("canvas1");
var processingInstance = new Processing(canvas, sketchProc);

使用processing.js进行纯javascript像素操作

1 个答案: