Processing.js - 绘制到图像上

时间:2013-03-13 17:46:27

标签: html5 canvas processing processing.js

使用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);
    }
}

有关为何可能发生这种情况的任何想法?

1 个答案:

答案 0 :(得分:2)

你需要调用noFill();在调用ellipse()之前。应该这样做