當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
!JS实战之随机像素图
生活随笔
收集整理的這篇文章主要介紹了
!JS实战之随机像素图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript實例分享之----畫隨機像素圖。隨機像素圖(作者自己取得名字)指的是一張圖片上每一個像素的顏色都是隨機的。此時應該能聯想到這幅圖多么眼花繚亂,好吧,我們用JS來實現它的原因是JS很方便,而且自帶了一個canvas(畫布)API,比較實用。 好,先上成果,為了避免XSS攻擊的懷疑,代碼我將以圖片的形式公布:
然后效果如圖:
看到了吧,短短12行JS代碼成就了一幅十分美好的圖。其實實現代碼也很簡單,讓我們仔細看看。 首先,我們建一個畫布,因為默認是300*150嫌小,我們調整到600*600; 然后我們用一個JS變量ctx來鎖定畫布的“畫筆”,準備畫一個500*500的隨機像素圖; 再然后我們只需要在這250000個像素中隨機填入顏色即可; 之后,我們運用兩層循環來遍歷這些像素; 再之后,我們為每一個像素的rgb分量分別寫入0~255的隨機數,也就是Math.floor(Math.random()*256); 因為取整函數floor取到0而娶不到1,所以是256; 最后我們用矩形工具fillRect完成了圖像的繪畫; 下面來張放大圖:
是不是很刺激!
然后效果如圖:
看到了吧,短短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实战之随机像素图的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何搭建Electron开发环境
- 下一篇: 《中国人工智能学会通讯》——4.7 当前