Javascript 画布大小调整和处理JS绘图功能不同步_Javascript_Css_Canvas_Processing.js

Javascript 画布大小调整和处理JS绘图功能不同步

javascript css canvas

Javascript 画布大小调整和处理JS绘图功能不同步,javascript,css,canvas,processing.js,Javascript,Css,Canvas,Processing.js,我在画布上画了一个游戏。画布背景是蓝色的。processingJS的draw函数只是在画布上绘制浅蓝色背景帆布占据了整个窗户。那部分没问题。画布调整大小以适应窗口，我可以在控制台中看到窗口事件侦听器工作正常理想情况下，我只能看到浅蓝色。但我没有无论窗口大小，屏幕最初都是浅蓝色的。如果我调整大小使其变小，窗口将保持浅蓝色。如果我使窗口比原来大（刷新页面时），则窗口中大于画布原始大小的剩余区域为蓝色，而不是浅蓝色（这意味着画布正在调整大小，但绘图功能并没有像我所希望的那样绘制整个窗口）以下

我在画布上画了一个游戏。画布背景是蓝色的。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>


正文、画布、html{
保证金：0；
填充：0；
边界：0无；
}
帆布{
显示：块；
背景：rgb（100100255）；
}

下面是脚本标记中的JavaScript代码

<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>


var canvas=document.getElementById（“myCanvas”）；
var canvasWidth=window.innerWidth；
var canvasHeight=window.innerHeight；
canvas.width=画布宽度；
canvas.height=画布高度；
window.addEventListener（“调整大小”，canvasResize）；
函数canvasResize（）{
console.log（“调整大小”）；
画布宽度=window.innerWidth；
画布高度=window.innerHeight；
canvas.width=画布宽度；
canvas.height=画布高度；
};
var sketchProc=函数（processingInstance）{
带（处理站）{
尺寸（画布宽度、画布高度）；
帧率（30）；
//程序代码如下
draw=函数（）{
背景（235、245、255）；
};
//程序代码Goesabove
}};
var canvas=document.getElementById（“myCanvas”）；
var processingstance=新处理（myCanvas、sketchProc）；

您的问题是，即使您正在调整画布的大小，Processing.js也不知道您已经调整了画布的大小。因此，它将继续使用在程序开始时计算的原始

宽度

和

高度

值

您可以通过将此行添加到

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);

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

您是否可以链接到运行代码的JSFIDLE或CodePen？我似乎无法通过复制粘贴来运行您的代码。我做了一些更改。如果您复制并粘贴它，它应该可以工作。我第一次漏掉了processingJS库的链接，但我添加了这一部分。另外，我不知道JS fiddle到底是什么，所以我将对此进行研究，因为我感觉它可能会帮助我传达我的问题等等。对不起，当我将代码粘贴到CodePen中时，我只看到一个浅蓝色的窗口。是的，JSFiddle和CodePen允许您链接到实际运行的代码，这对此类问题非常有帮助。您也可以将代码的可运行副本直接嵌入到本文关于堆栈溢出的文章中，但我对此经验较少。我不知道如何调整程序中“窗口”的大小，这样可能很难检测到这种特性。我实际上在用记事本。当我复制并粘贴上述代码到记事本中，并在chrome中运行它时，我从浅蓝色框开始。但是当我把它调整得更大的时候，我开始看到深蓝色框勾勒出原来的浅蓝色框。但是当我刷新时，整个东西又变成了浅蓝色。这非常令人兴奋。我已经做了一些更改，正如您概述的那样，以调整画布的大小，结果正是我想要的。我的编程技巧仍然很朴素，虽然对更有经验的人来说可能会感觉到，但对我来说，它看起来很棒。