博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
!JS实战之随机像素图
阅读量:6480 次
发布时间:2019-06-23

本文共 540 字,大约阅读时间需要 1 分钟。

hot3.png

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完成了图像的绘画;
下面来张放大图:
是不是很刺激!

转载于:https://my.oschina.net/jinhengyu/blog/1571677

你可能感兴趣的文章
Spring连接数据库的几种常用的方式
查看>>
MS CRM 2011 Schedule Report & Email Subscription
查看>>
Linux2.6内核驱动移植参考
查看>>
eclipse打开当前文件所在文件夹
查看>>
去哪儿搜索引擎QSearch设计与实现
查看>>
POJ 2255 Tree Recovery (二叉树)
查看>>
HDU 1026 Ignatius and the Princess I
查看>>
There are two ways for Datatable download as excel
查看>>
TextBox客户端JS赋值 后台获取(转载)
查看>>
imx6 uboot lcd
查看>>
DMA-330(二)
查看>>
gvim如何显示html属性代码提示? vim 如何显示 javascript属性及方法提示?
查看>>
hdoj:2086
查看>>
算法笔记_008:选择排序和冒泡排序【蛮力法】
查看>>
Spark MLlib架构解析(含分类算法、回归算法、聚类算法和协同过滤)
查看>>
为什么我会被淘汰?
查看>>
HDU 4704 Sum Fermat定律
查看>>
[Maven实战](9)传递性依赖
查看>>
smbclient和mount -t cifs共享win的共享文件夹? autocad小记
查看>>
windows查看端口占用以及关闭相应的进程
查看>>