使用HTML5 Canvas元素和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);
}
}
有关为何可能发生这种情况的任何想法?
答案 0 :(得分:2)
你需要调用noFill();在调用ellipse()之前。应该这样做