p5js代碼自動生成（p5js案例）

本文目錄一覽：

• 1、為什麼一些js特效里引用的js文件代碼密密麻麻的，不像是手寫的代碼
• 2、p5.js和html5 canvas兩者有何區別？
• 3、.js是什麼文件自動生成的么
• 4、如何使用js動態生成html代碼
• 5、js自動生成遞增編號
• 6、p5.js是前端還是後端

為什麼一些js特效里引用的js文件代碼密密麻麻的，不像是手寫的代碼

特效效果看著雖然不複雜，而且你每天上網看的很多布局雖然很簡潔，沒什麼，但簡單的往往不簡單，比如你看一些3D圖片，3D動畫很酷，但他未必難，也可能是他的的開發工具強大，所以很簡單就做出強大的效果。HTML5+CSS3，JS這些沒有什麼強大工具的支持，如果要寫複雜的功能都要手寫的，別看一個網頁簡簡單單的布局，特效，但是你看一下代碼，真是特別多，而且大部分都不是畫畫，設置一下某個選項就生成的

這個JS代碼應該是壓縮後的，要不然老是換行空格的，文件會很大，如果你要看他的代碼，也可以 美化代碼，閱讀會方便些，網上很多這種提供壓縮或美化JS代碼的網站

p5.js和html5 canvas兩者有何區別？

簡單的說，p5.js是一個js類庫；canvas是一個html5新增的一個元素，”canvas” 即 “畫布”,  此元素是為了客戶端矢量圖形而設計的。它自己沒有行為，卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。兩者要想繪圖，都需執行js代碼。仔細看p5的初始代碼，

function setup() {

  createCanvas(400, 400);//為html頁面創建canvas元素

}

兩者的本質都是通過js來實現canvas的表現，p5.js與jquery庫無異，將一些常用的功能需求的代碼進行封裝，以實現代碼的簡化。也就是任何p5.js可實現的，通過純canvas的js api都能實現，不過要想實現，往往犧牲得是時間與效率。而p5.js提供了一種僅需少量代碼就能實現很炫酷的操作的方法。兩者渲染速度比較，理論上應該是一樣的，畢竟大家殊途同歸嘛，都是通過js來實現的，只要純js寫的足夠優化，是會比p5.js快一丟丟的，差異不明顯。明顯的差異是p5.js在網頁載入時需要下載p5.js的類庫才能進行操作，而canvas api由於是客戶端提供的原因，則不需要。

.js是什麼文件自動生成的么

不是，.js的文件基本上是自己創建的一個包含JS的一個文件的，除非是你自己採用程序生成的

如何使用js動態生成html代碼

所謂動態生成html代碼就是源文件代碼中原來沒有內容或者需要重新改變此處的要顯示的文字或內容，需要用JavaScript代碼來實現。動態生成是一種很常見常用的方法。

用innerHTML寫入html代碼：

div id=”zd”/div

『即為向id為zd的標籤寫入內容

scriptdocument.getElementById(“zd”).innerHTML=”這裡即為要寫入的代碼”/script

說明：

innerHTML：向對象插入內容。

js自動生成遞增編號

var i;

for(i=0;i10000;i++){

    console.log(‘CK’+’1804’+(“0000” + i).substr(-4))

}

p5.js是前端還是後端

P5是Processing語言的一個JS移植版本，使其能在Web中工作。它完全使用JavaScript來實現Processing語言相同的功能，但並不會動態翻譯Processing語言代碼，這一點和Processing.js不同。也就是P5.js差不多等同於Processing.js的JS API部分。但P5.js的功能更單一，角色更專註，且也是Processing基金會唯一支持的項目。