纯JavaScript像素操作与处理.js

Question

我想通过处理来操纵像素.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 像素转换为黑色。查看控制台.log对于p.pixels，我想知道这种类型的数组访问在纯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);