Processing.js - 在圖像上繪圖

使用HTML5 Canvas元素和Processing.js，我想在圖像上繪製圓形輪廓。但是，當我運行我的代碼時，圓形輪廓內的區域只會變成白色，而不是保留該區域中的圖像信息。我懷疑這是一個圖像加載問題，但我已經包括了評論：Processing.js - 在圖像上繪圖

/* @pjs preload="myImage.jpg"; */

我讀過會解決這個問題。我的整個.pde文件如下：

/* @pjs preload="myImage.jpg"; */ 

// Global Variables 
PImage img; 

// Data Storage 
ArrayList cent_x; 
ArrayList cent_y; 
ArrayList cent_r; 

void setup() { 
    // Establish Canvas 
    size(760,560); 

    // Load Image 
    img = loadImage("myImage.jpg"); 

    // Initialize Data Structures 
    cent_x = new ArrayList(); 
    cent_y = new ArrayList(); 
    cent_r = new ArrayList(); 
} 

void draw() { 
    // Draw Background Image 
    image(img,0,0,width,height);  

    // Add to Data Structures 
    if (mousePressed) { 
     cent_x.add(mouseX); 
     cent_y.add(mouseY); 
     cent_r.add(15);  
    } 

    // Draw all Marks 
    for (int i = 0; i<cent_x.size(); i++) { 
     int c_x = cent_x.get(i); 
     int c_y = cent_y.get(i); 
     int c_r = cent_r.get(i); 

     stroke(255,255,0); 
     ellipse(c_x,c_y,c_r,c_r); 
    } 
}

有關爲什麼可能發生的任何想法？

來源

2013-03-13 nsax91

你需要調用noFill（）;在調用橢圓（）之前。應該這樣做

來源

2013-03-13 18:23:44

Processing.js - 在圖像上繪圖

回答

相關問題