纯JavaScript像素操作与processing.js

  • Z时代
  • 2024-01-10
  • 分类：问答

我想用processing.js操纵像素。我想在纯JavaScript中做到这一点，但我有困难。下面的简单情况不成功纯JavaScript像素操作与processing.js

<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？任何建议欢迎和感谢提前。

回答：

那是因为你必须直接连接的功能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);

以上是 纯JavaScript像素操作与processing.js 的全部内容， 来源链接： utcz.com/qa/265889.html

回到顶部