• !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实战之随机像素图
    是不是很刺激!
  • 相关阅读:
    算法导论
    深度探索C++对象模型
    git 介绍及其使用总结
    前端跨域常见的几种方式
    前端面试angular 常问问题总结
    低版本浏览器支持HTML5标签的方法
    理解 angular 的路由功能
    Angular 新手容易碰到的坑
    Angular 新手容易碰到的坑
    一 Unicode和UTF-8的异同
  • 原文地址:https://www.cnblogs.com/jinhengyu/p/7516860.html
Copyright © 2020-2023  润新知