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 - 在图像上绘图

回答

相关问题