canvas 调整大小和处理 JS 绘图功能不同步

Question

我在 canvas 上绘制了一个游戏。 canvas 背景是蓝色的。 processingJS 的绘制函数只是在 canvas 上绘制浅蓝色背景。

canvas占据了整个window。那部分没问题。 canvas 调整大小以适应 window，我可以在控制台中看到 window 事件监听器工作正常。

理想情况下，我应该只看到浅蓝色。但是我没有。

无论 window 的大小如何，屏幕最初都是淡蓝色的。如果我调整大小使其更小，window 将保持浅蓝色。如果我使 window 比原来更大 （当我刷新页面时）， window 的剩余区域大于原始大小canvas 是蓝色的，而不是浅蓝色（这意味着 canvas 正在调整大小，但绘制函数并没有像我想要的那样绘制所有内容）。

这里是 css 和 html:

<!DOCTYPE html>
<html>
<head>
<style> 
body, canvas, html {
  margin:0;
  padding:0;
  border:0 none;
}
canvas {
  display: block;
  background: rgb(100, 100, 255);
}
</style>
</head>
<body>    
  <canvas id="myCanvas"></canvas> 
</body>

这是脚本标记中的 javacript 代码。

<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>

<script>
var canvas = document.getElementById("myCanvas");
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

window.addEventListener("resize", canvasResize);

function canvasResize() {
  console.log("resize");
  canvasWidth = window.innerWidth;
  canvasHeight = window.innerHeight;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
};

var sketchProc = function(processingInstance) {
with (processingInstance) {    
size(canvasWidth, canvasHeight);
frameRate(30); 

//ProgramCodeGoesBelow

draw = function() {
  background(235, 245, 255);
};

//ProgramCodeGoesAbove

}};

var canvas = document.getElementById("myCanvas");    
var processingInstance = new Processing(myCanvas, sketchProc);
</script>
</html>

Answer 1

您的问题是因为即使您正在调整 canvas 的大小，Processing.js 并不知道您已经调整了 canvas 的大小。所以它继续使用它在程序开始时计算的原始 width 和 height 值。

您可以通过将此行添加到您的 draw() 函数来确认这一点：

text(width + " x " + height, 20, 20);

那些 width 和 height 变量是您的 Processing 草图的内部变量，当您调整 canvas 大小时它们不会改变。经过一番修改后，一种似乎可行的解决方案是在调整 canvas 大小时设置这些内部变量，如下所示：

function canvasResize() {
  console.log("resize");
  processingInstance.width = window.innerWidth;
  processingInstance.height = window.innerHeight;
  canvas.width = processingInstance.width;
  canvas.height = processingInstance.height;
};

老实说，这感觉有点老套，所以如果您遇到其他奇怪的行为，我不会感到惊讶，但它似乎适用于您的示例。另请注意，您使用的是实例模式，因此对于非实例模式草图，代码看起来会略有不同。

另请注意，Processing.js 确实允许您访问 screenWidth 和 screenHeight 变量中的 window 大小，因此您可以更改 size()为此功能：

size(screenWidth, screenHeight);

这与您的问题没有直接关系，但它可能会为您节省几行代码。

canvas 调整大小和处理 JS 绘图功能不同步

canvas resizing and processingJS draw function not in-sync

javascript

css

canvas

processing.js