zoukankan      html  css  js  c++  java
  • !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实战之随机像素图
    是不是很刺激!
  • 相关阅读:
    day 01
    day14
    day12
    day13
    day11
    day9
    day10
    day08
    day07
    day06
  • 原文地址:https://www.cnblogs.com/jinhengyu/p/7516859.html
Copyright © 2011-2022 走看看