Question

我有一个p5画布，初始宽度和高度为200px（来自javascript）。但是，我也在javascript中将宽度设置为100％。有没有办法在p5中创建画布，然后使用css设置它的宽度和高度属性？

的CSS：

canvas {
  width: 100%;
}

的javascript：

function setup() {
  createCanvas(200, 200);
}
function draw() {
  background(100);
}

请参阅演示此内容的my codepen。

Answer 1

肯定有！秘诀是p5中画布的宽度是动态创建的，这意味着它在element级别应用。没有办法以特异性覆盖它，因此您需要将声明提升为!important：

canvas {
  width: 100% !important;
}

请注意，虽然您可以轻松指定width，但元素的height相对于父级。如果您没有拥有父级，则默认为0px。在这种情况下，它会尝试纯粹根据高度进行调整，使画布成为一个完美的正方形。您可以设置没有父级的基于百分比的width，因为如果没有目标元素的父级，它会假定视口的宽度。

要调整height，您需要使用基于像素的测量，或者使用固定高度父 >：

body {
  height: 100px;
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

或者：

canvas {
  width: 100% !important;
  height: 100px !important;
}

我创造了一个展示这个here的小提琴。

希望这有帮助！：）