如何在HTML5畫布動畫中改變正方形的矩形

我必須首先說我是一個絕對NOOB，特別是Javascript，所以我需要你的幫助，但請記住，如果你能解釋爲什麼noobs，所以我可能會學到一些東西。如何在HTML5畫布動畫中改變正方形的矩形

話雖這麼說，我正在使用的代碼和插件本網站http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/#comment-242上解釋到我的網站開發一個客戶端（第2圖像中，一個在左邊粉紅色方塊）https://soluzionweb.com/lexmart/

而且問題是粉紅色的正方形，不是正方形，而是矩形，除非您放大並縮小頁面，然後渲染正確尺寸的正方形。

我認爲這可能是一個好主意，將我的Wordpress中的particles.js文件加載到頁面末尾，因此，加載完整頁面後加載，但不知道是否是問題，並不確定這是否會是一個解決方案...以及更多..我嘗試了幾個函數，但無法弄清楚什麼是排隊的Javascript文件正確的代碼。

這是我actualy：

這是我想什麼有：

來源

2017-10-09 Andres Molina Perez-Tome

試試這個插件在一個空白頁，讓我們知道。如果您可以在空白頁面中重現問題，可以爲我們創建一個[jsfiddle]（https://jsfiddle.net/）。 – T30

嘿！首先T30，非常感謝您的回答。這就是說，我做了你所問（或至少我認爲），並將動畫添加到空白頁面（我只是在頂部和底部添加了10％的填充），它仍然顯示廣場上的變形，請參閱這裏https://soluzionweb.com/lexmart/particles-test/ 我不知道它是否有助於解決問題，但動畫是由一個非商業插件使用這個JS文件https：// soluzionweb創建的。 com/lexmart/wp-content/plugins/ParticleJs-WP-Plugin-master // includes /articles.js？ver = 4.8.2 –

您可以從此鏈接嘗試插件https://github.com/ingeniousweb/ParticleJs -WP-Plugin/archive/master.zip –

此修復程序的問題，把下面的到我的style.css活動主題文件：

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

根據上面的一些評論，我做了一些測試，發現問題與CSS寬度和高度的聲明有關，而不是使用Javascript。

來源

2017-10-09 16:29:21

如何在HTML5畫布動畫中改變正方形的矩形

回答

相關問題