如何在 html5 画布动画中更改正方形中的矩形答案

【问题标题】：How to change rectangle in squares in an html5 canvas animation如何在 html5 画布动画中更改正方形中的矩形
【发布时间】：2018-03-20 11:34:26
【问题描述】：

我必须首先说我是一个绝对的菜鸟，特别是 Javascript，所以我需要你的帮助，但请记住，如果你能为菜鸟解释一下，我将不胜感激，这样我就可以学到一些东西。

话虽如此，我正在使用本网站 http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/#comment-242 上为我的开发网站解释的代码和插件用于客户（第二张图片，左侧带有粉红色方块的图片）https://soluzionweb.com/lexmart/

问题是粉红色的正方形不是正方形，而是矩形，除非您放大和缩小页面，然后它会以正确的大小呈现正方形。

我认为将我的 Wordpress 中的particles.js 文件排入队列以在页面末尾加载可能是个好主意，因此，一旦加载了整个页面，它就会加载，但不确定这是否是问题所在，并且不确定这是否是一个解决方案......还有更多......我尝试了一些函数，但无法弄清楚将 Javascript 文件排入队列的正确代码是什么。

这是我实际拥有的：

这是我想要的：

【问题讨论】：

在空白页中试用此插件并告诉我们。如果您可以在空白页中重现该问题，也许可以为我们创建一个jsfiddle。
嘿！首先T30，非常感谢您的回答。话虽这么说，我做了你问的（或者至少我认为）并将动画添加到空白页面（我只是在顶部和底部添加了 10% 的填充），它仍然在正方形上显示变形，请看这里@ 987654326@不知道能不能解决问题，但是动画是非商业插件使用这个JS文件制作的soluzionweb.com/lexmart/wp-content/plugins/…
你可以从这个链接github.com/ingeniousweb/ParticleJs-WP-Plugin/archive/master.zip尝试插件
这里有一篇文章将向您解释发生了什么：stackoverflow.com/questions/2588181/… 要修复它需要通过您的链接搜索此画布的设置方式，因为您没有提供minimal reproducible example。但基本上，您的画布的属性设置为页面的大小，而不是全屏显示。所以你需要找到这个大小的设置位置，并将其设置为正确的容器大小。
嗨 Kaiido，感谢您的提示！所以如果是这样的话，我唯一能想到的可能是传递画布的大小是由网络在示例中生成的 Json 代码。但正如我在开始时所说的那样，我不知道，所以如果你能帮我一把，那将是非常受欢迎的。我无法在此处粘贴 Json 代码，但是如果你们检查网站上的元素，我想您将能够看到它。

标签： javascript wordpress animation canvas html5-canvas

【解决方案1】：

此修复问题，将以下内容添加到我的 style.css 活动主题文件中：

.particles-js-canvas-el {
    width: calc(100 * (1vw + 1vh - 1vmin)) !important;
    height: calc(50 * (1vw + 1vh - 1vmin)) !important;
}

根据上面的一些cmets，我做了一些测试，发现问题与CSS宽高的声明有关，与Javascript无关。

【讨论】：