JavaScript實(shí)例分享之----畫隨機(jī)像素圖。隨機(jī)像素圖（作者自己取得名字）指的是一張圖片上每一個(gè)像素的顏色都是隨機(jī)的。此時(shí)應(yīng)該能聯(lián)想到這幅圖多么眼花繚亂，好吧，我們用JS來實(shí)現(xiàn)它的原因是JS很方便，而且自帶了一個(gè)canvas（畫布）API，比較實(shí)用。 好，先上成果，為了避免XSS攻擊的懷疑，代碼我將以圖片的形式公布：
然后效果如圖：

看到了吧，短短12行JS代碼成就了一幅十分美好的圖。其實(shí)實(shí)現(xiàn)代碼也很簡(jiǎn)單，讓我們仔細(xì)看看。 首先，我們建一個(gè)畫布，因?yàn)槟J(rèn)是300*150嫌小，我們調(diào)整到600*600； 然后我們用一個(gè)JS變量ctx來鎖定畫布的“畫筆”，準(zhǔn)備畫一個(gè)500*500的隨機(jī)像素圖； 再然后我們只需要在這250000個(gè)像素中隨機(jī)填入顏色即可； 之后，我們運(yùn)用兩層循環(huán)來遍歷這些像素； 再之后，我們?yōu)槊恳粋€(gè)像素的rgb分量分別寫入0~255的隨機(jī)數(shù)，也就是Math.floor(Math.random()*256)； 因?yàn)槿≌瘮?shù)floor取到0而娶不到1，所以是256； 最后我們用矩形工具fillRect完成了圖像的繪畫； 下面來張放大圖：
是不是很刺激！

總結(jié)

以上是生活随笔為你收集整理的！JS实战之随机像素图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。