純JavaScript像素操作與processing.js

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);