！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完成了图像的绘画；

下面来张放大图：

是不是很刺激！

！JS实战之随机像素图相关推荐

用node.js 搭建的博客程序心得(node.js实战读书笔记1)
学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一 ...
《Ember.js实战》——2.3　计算属性
本节书摘来自异步社区<Ember.js实战>一书中的第2章,第2.3节,作者:[挪]Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区" ...
随机森林图像分类实战：随机森林分类聚类（Kmeans）降维后的数据、随机森林分类聚类（Kmeans）降维后的合成（append）数据
随机森林图像分类实战:随机森林分类聚类(Kmeans)降维后的数据.随机森林分类聚类(Kmeans)降维后的合成(append)数据目录
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源
视频地址:www.cctalk.com/v/151149238- 处理静态资源无非花开花落,静静. 指定静态资源目录这里我们使用第三方中间件: koa-static 安装并使用安装 koa-st ...
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 路由koa-router
路由koa-router--MVC 中重要的环节:Url 处理器 ?? iKcamp 制作团队原创作者:大哼.阿干.三三.小虎.胖子.小哈.DDU.可木.晃晃文案校对:李益.大力萌.Au.DDU. ...
js前面代码出错继续运行_Node.JS实战41：让命令行变的五颜六色
通常情况下,命令行文字都是黑底白色的: 想不想来点改变? 给文字换个颜色:给背景换个颜色. 先来看段代码: console.log('[31m Hello www.JShaman.com [0m'); ...
ML之RF：利用Js语言设计随机森林算法【DT之CART算法(gain index)】并应用随机森林算法
ML之RF:利用Js语言设计随机森林算法[DT之CART算法(gain index)]&并应用随机森林算法目录输出结果设计思路代码实现(部分代码) 输出结果设计思路代码实现(部分代 ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
js 查错_7年前端开发经验的我，写了本Vue.js实战开发，开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...

！JS实战之随机像素图

！JS实战之随机像素图相关推荐

最新文章

热门文章