[p5js中实例模式下的createGraphics

Question

我是p5的新手。

[我的目的是显示我键入的键的ASCII值，并留下一条垂直线的痕迹，其与左侧的距离为200+键的ASCII值，

这可以使用createGraphics（）完成（在顶部添加一个与原始尺寸相同的附加画布层，并在该附加画布层上绘制）

但是代码似乎不起作用，并且在控制台中也未显示任何错误。

const c5=function(p){

let pg;

p.setup=function(){
    p.createCanvas(600,400);
    pg=p.createGraphics(600,400);
};

p.draw=function(){
    p.background(200);
    p.textAlign(p.CENTER,p.TOP);
    p.textSize(20);
    p.text('ASCII Value : '+p.keyCode,300,100);

    pg.line(200+p.keyCode,200,200+p.keyCode,300);//shift right by 200
};

};

Answer 1

第一个问题是，您必须告诉引擎您命名为p的东西实际上是p5实例。您可以使用p5构造一个new p5(...)对象，如下所示：

const c5 = new p5(function(p) {

  p.setup = function(){
      ...
  };

  p.draw = function(){
      ...
  };
});

然后您可以用垂直线正确填充pg图形对象。但是，您不要在原始画布上“绘制”它。您可以使用p5.js image()函数执行此操作（另请参见createGraphics() documentation中显示的示例）。

我已经在p5.js编辑器createGraphics()中创建了一个有效的示例。

Answer 2

您的代码非常接近。您正在创建图形对象并对其进行绘图，但是还需要将其作为图像显示在画布上。在您的代码段中，您也缺少创建新here对象的调用，但这可能只是复制粘贴错误。

这里是您的代码的有效代码段，其中包含绘制图像的调用。我也将按键检测逻辑移到了p5js

keyPressed

const c5=function(p){

let pg;

p.setup=function(){
    p.createCanvas(600,400);
    pg=p.createGraphics(600,400);
};

p.draw=function(){

};

p.keyPressed = function() {
    p.background(200);
    p.textAlign(p.CENTER,p.TOP);
    p.textSize(20);
    p.text('ASCII Value : '+p.key + " " +p.keyCode,300,100);
    pg.line(200+p.keyCode,200,200+p.keyCode,300);//shift right by 200
    p.image(pg, 0, 0);
   
  return false; // prevent default
}


};
var myp5 = new p5(c5)