画布粒子 - 在窗口调整大小时更新画布大小答案

【问题标题】：Canvas Particles - Update canvas size on Window Resize画布粒子 - 在窗口调整大小时更新画布大小
【发布时间】：2016-04-16 05:04:25
【问题描述】：

我对 Canvas 动画非常陌生，我遇到了一些问题，想知道你们是否可以帮助我。

我正在使用这个演示 - http://cssdeck.com/labs/html5-canvas-particles-web-matrix - 但我需要它在调整窗口大小时重新计算画布大小。这需要在 jQuery 中更新，而不是 CSS 或 HTML（仅供参考，CSS 是画布宽度和高度 = 100%）。

谁能帮帮我？

谢谢！ :)

【问题讨论】：

您是否尝试过自己解决此问题？你能展示你的尝试吗？
欢迎来到 Stackoverflow。在这里，我们处理的是关于编码问题而不是（你的）设计问题的问题。以下是您编写代码的起始计划：(1) 清除画布，(2) 使用 context.scale(scaleFactor,scaleFactor) 缩放整个画布（注意：您必须按比例缩放，否则绘图会出现扭曲）& (3)重绘粒子。如果您编写的代码有问题，请返回 Stackoverflow。 :-)
谢谢大家。尼尔 - 我试过这个：window.onresize = function() { var canvas = document.getElementById("canvas"); // Initialize the context of the canvas var ctx = canvas.getContext("2d"); // Set the canvas width and height to occupy full window var W = window.innerWidth, H = window.innerHeight; canvas.width = W; canvas.height = H; // Some variables for later use var particleCount = 150, particles = [], minDist = 70, dist; } 基本上是复制初始化代码并在调整窗口大小时再次触发它 - 但它不起作用......（1/2）
(2/2) - 它重绘画布这很好（它停止拉伸粒子）但它不更新尺寸，所以粒子只存在于预调整大小的边界内画布的尺寸。（希望这是有道理的！）

标签： javascript jquery css html canvas

【解决方案1】：

您的事件window.onresize 不应声明新变量H 和W，而是使用“旧”变量，如下所示：

window.onresize = function() {  
   W = window.innerWidth;
   H = window.innerHeight;
   canvas.width = W;
   canvas.height = H; 
}

如果你想修改其他参数如particleCount或particles数组也不要使用var，因为它会在函数范围内创建新的变量。

【讨论】：

你是一个绝对的传奇我的朋友！谢谢你:)