p5.js 输入相对于 canvas 的位置

Question

这是我的：

function setup() {
  var cnv = createCanvas(960,540);
  cnv.parent("sketchHolder");
  background('white');

  var input = createInput();
  input.position(10,10);
  input.parent("sketchHolder");
}

我有一个名为 "sketchHolder" 的 div，以 css 为中心。我试图使输入位置相对于 canvas，但它位于 canvas 之外的整个网页上。有什么建议吗？

Answer 1

function setup() {
  var cnv = createCanvas(960, 540);
  cnv.parent("sketchHolder");
  background("blue");

  var input = createInput();
  input.position(10, 10);
  input.parent("sketchHolder");
}

#sketchHolder {
  width: 960px;
  height: 540px;
  margin: 0 auto;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>

<div id="sketchHolder"></div>

Codepen link

Answer 2

我遇到了这个问题并且 javascript 有效：

var element = document.getElementsByClassName('canvasjs-chart-canvas')[0];
element.style.removeProperty("position");

p5.js 输入相对于 canvas 的位置

p5.js input position relative to canvas

html

javascript

css

canvas

p5.js