画布调整大小和处理JS绘制功能不同步答案

【问题标题】：canvas resizing and processingJS draw function not in-sync画布调整大小和处理JS绘制功能不同步
【发布时间】：2017-05-14 04:15:34
【问题描述】：

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

画布占据了整个窗口。那部分没问题。画布调整大小以适合窗口，我可以在控制台中看到窗口事件侦听器工作正常。

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

无论窗口大小，屏幕最初都是浅蓝色的。如果我调整大小以使其变小，则窗口将保持浅蓝色。如果我使窗口比原来更大（刷新页面时），大于画布原始大小的窗口剩余区域为蓝色，而不是浅蓝色（意味着画布正在调整大小，但绘图功能并没有像我想要的那样绘制所有内容）。

这里是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>

【问题讨论】：

您是否可以链接到运行代码的 JSFiddle 或 CodePen？我似乎无法通过复制粘贴来运行您的代码。
我做了一些更改。如果您复制并粘贴它，它应该可以工作。我第一次省略了到 processingJS 库的链接，但我添加了那部分。
另外，我真的不知道 JS fiddle 是什么，所以我要研究一下，因为我觉得它可以帮助我交流我的问题等等。
抱歉，当我将您的代码粘贴到 CodePen 时，我只看到一个浅蓝色窗口。是的，JSFiddle 和 CodePen 允许您链接到实际运行的代码，这对这类问题非常有帮助。您还可以将代码的可运行副本直接嵌入到您在 Stack Overflow 上的帖子中，但我对此经验较少。
我尝试在 JSfiddle 中执行此操作，并且还看到了一个浅蓝色方块。我不知道如何在该程序中调整“窗口”的大小，这样可能很难检测到这种特性。我实际上正在使用记事本。当我将上面的代码复制并粘贴到记事本中并在 chrome 中运行时，我从浅蓝色框开始。但是当我把它调整得更大时，我开始看到原来的浅蓝色框的轮廓是深蓝色的。但是当我刷新时，整个事情又变成了淡蓝色。

标签： javascript css canvas processing.js

【解决方案1】：

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

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

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

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

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 变量中的窗口大小，因此您可以将您的 size() 函数更改为：

size(screenWidth, screenHeight);

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

【讨论】：

这非常令人兴奋。正如您对 canvasResize 的概述，我做了一些更改，结果正是我想要的。我的编程技能仍然很普通，虽然对于更有经验的人来说可能会觉得很老套，但对我来说它看起来很棒。