我在p5.js v2中使用一个具有两个轴的变量字体（wght 和 wdth）。我可以很容易地用 fontWeight() 来驱动字重轴的动画。

我该如何用同样的方式控制字宽轴（wdth）？

我不想用JavaScript修改 CSS 的样式。我想使用 text("word", x, y) 方法，这样日后就能从画布读取它的像素。

以下是我的代码：

let vid;
let scl = 10;
let ratio = 128 / 72;
let font;
let stamps


async function setup() {
  font = await loadFont("/BeyondVF.ttf");
  let cnv = createCanvas(windowHeight * ratio, windowHeight);

  let newCanvasX = (windowWidth - windowHeight * ratio) / 2;
  cnv.position(newCanvasX, 0);

  textAlign(CENTER, CENTER);

  stamps = createGraphics(windowHeight * ratio, windowHeight);
}

function draw() {
  background(0);
  stamps.background(0);

  let Fweight = map(mouseX, 0, height, 300, 700);
  let Fwidth = map(mouseY, 0, width, 100, 200);
  stamps.textWeight(Fweight);

  stamps.textFont("khat");
  stamps.textSize(500);
  stamps.fill(255);
  stamps.noStroke();
  stamps.text("A", windowWidth / 2, windowHeight / 2);

  let whitness = 200;

  for (let i = 0; i < width; i += 5) {
    for (let j = 0; j < height; j += 5) {
      let pixelColor = stamps.get(i, j);
      let r = pixelColor[0];
      let g = pixelColor[1];
      let b = pixelColor[2];
      if (r > whitness && g > whitness && b > whitness) {
        fill(255, 255, 255);
        circle(i + random(-3, 3), j + random(-3, 3), 5);
      }
    }
  }
  // Update the canvas.
  updatePixels();


  function windowResized() {
    resizeCanvas(windowHeight * ratio, windowHeight);
    vid.size(width / scl, height / scl);
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

@font-face {
  font-family: 'khat';
  src: url('/BeyondVF.ttf')format('truetype');
}

解决方案

我不确定有没有办法在不使用CSS的情况下做到这一点

我能找到的最佳方法是使用.elt.style.fontVariationSettings = "'wght' " + Fweight + ", 'wdth' " + Fwidth，这在本教程中我已经让它起作用了

https://editor.p5js.org/peilingjiang/sketches/lU2Svc9iW

如果这对你来说不可行，我也不知道该怎么办。我花了一个小时尝试找出其他办法，但到现在还没成功。