天天看點

!JS實戰之随機像素圖

JavaScript執行個體分享之----畫随機像素圖。随機像素圖(作者自己取得名字)指的是一張圖檔上每一個像素的顔色都是随機的。此時應該能聯想到這幅圖多麼眼花缭亂,好吧,我們用JS來實作它的原因是JS很友善,而且自帶了一個canvas(畫布)API,比較實用。

好,先上成果,為了避免XSS攻擊的懷疑,代碼我将以圖檔的形式公布:

!JS實戰之随機像素圖

然後效果如圖:

!JS實戰之随機像素圖

看到了吧,短短12行JS代碼成就了一幅十分美好的圖。其實實作代碼也很簡單,讓我們仔細看看。

首先,我們建一個畫布,因為預設是300*150嫌小,我們調整到600*600;

然後我們用一個JS變量ctx來鎖定畫布的“畫筆”,準備畫一個500*500的随機像素圖;

再然後我們隻需要在這250000個像素中随機填入顔色即可;

之後,我們運用兩層循環來周遊這些像素;

再之後,我們為每一個像素的rgb分量分别寫入0~255的随機數,也就是Math.floor(Math.random()*256);

因為取整函數floor取到0而娶不到1,是以是256;

最後我們用矩形工具fillRect完成了圖像的繪畫;

下面來張放大圖:

!JS實戰之随機像素圖

是不是很刺激!

繼續閱讀