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实战之随机像素图的更多相关文章

  1. 《Node.js实战(双色)》作者之一——吴中骅访谈录

  2. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  3. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  4. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  5. iKcamp团队制作|基于Koa2搭建Node.js实战项目教学(含视频)☞ 环境准备

    安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...

  6. vue.js实战——购物车练习(包含全选功能)

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  7. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  8. Node.js实战(二)之HelloWorld示例

    经过前面的Node.js实战(一)之概述 想必你应该对Node.js的概念.应用场景.优缺点等有个大致的了解,同时你本地Windows或者Linux上已经准备好了Node.js环境. 下面我们来进入每 ...

  9. iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 错误处理

    沪江CCtalk视频地址:https://www.cctalk.com/v/15114923887518 处理错误请求 爱能遮掩一切过错. 当我们在访问一个站点的时候,如果访问的地址不存在(404), ...

随机推荐

  1. js验证15位或18位身份证

    本篇文章是本人在网上搜集了一些验证,然后又个人进行一定修改的关于身份证的验证,欢迎修改指正..... function IdCardValidateRule(idCard) { var tip;    ...

  2. Jenkins: 配置信息变更历史

    像 Jenkins 这样的系统,使用的过程就是配置文件变更的过程.如果能够对配置文件的变更进行跟踪管理,将极大的提高系统的可用性.Job Configuration History 插件就是这么一款实 ...

  3. Oracle 11g DG手工switchover切换标准化流程

    Oracle 11g DG手工switchover切换标准化流程 环境:RHEL 6.5 + Oracle GI 11.2.0.4 + Oracle DB 11.2.0.4 Primary RAC(2 ...

  4. 8. Andrénalin ★ Serial

    无花无壳爆破/硬编码 istcmp字符串比较 "<BrD-SoB>" 仅允许非商业转载,转载请注明出处

  5. 序列化之protobuf与avro对比(Java)

    最近在做socket通信中用到了关于序列化工具选型的问题,在调研过程中开始趋向于用protobuf,可以省去了编解码的过程.能够实现快速开发,且只需要维护一份协议文件即可. 但是调研过程中发现了pro ...

  6. Hadoop1.0.3安装部署

    0x00 大数据平台相关链接 官网:http://hadoop.apache.org/ 主要参考教程:http://www.cnblogs.com/xia520pi/archive/2012/05/1 ...

  7. 【社交系统研发日记】如何在 Laravel 中 “规范” 的开发验证码发送功能

    顺便发个小通知:7月15日ThinkSNS+开源版发布,同时非开源的APP也走出内测阶段,体验二维码也全面发布体验. 什么是ThinkSNS ? ThinkSNS(简称TS),一款全平台综合性社交系统 ...

  8. java 分解质因数 基础增强

    题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 为了熟悉加强基础练习,搞搞经典小demo..话不多说,直接贴代码,看注释.package www.test;import j ...

  9. MyISAM 和InnoDB 区别

    MyISAM 和InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别 为:MyISAM类型不支持事务处理等高级处 ...

  10. python 符合Python风格的对象

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Helvetica } 对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的 ...