时间戳

首页 > 解决方案 > p5js中实例模式下的createGraphics

p5.js - p5js中实例模式下的createGraphics

问题描述

我是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
};

};

标签： p5.js

解决方案

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

const c5 = new p5(function(p) {

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

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

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

我在这里的 p5.js 编辑器中做了一个工作示例。

推荐阅读