需要想法只显示一些像素并使剩余像素变灰

我正在寻找想法…为客户集思广益一个新项目….我有一个图像… 300px x 300px …我需要一次显示一个随机像素的图像，直到整个图像是透露。

基本上，在一定的间隔，一个像素被显示并且仍然显露，而其他像素仍然是空白的。 在每个间隔处，显示随机的另一个像素并且保持显示以连接其他显示的像素。 最终，将显示所有像素。

关于如何实现这一目标的任何建议？

我可以制作大量的图像副本并手动显示一个随机像素，但肯定可以以编程方式完成:)

哦，它不能是任何forms的闪光灯。

Answer 1

编辑：我意识到我错误地解释了你需要做什么，但我认为这很酷很酷，可以适用于你的问题……

请参阅以下工作演示→

我把它放在jQuery中。 我让每个像素实际上都是一个3×3的盒子，因为否则它需要花费太长时间来处理。 对于客户端的这个问题，似乎工作得很好，尽管我还没有测试过IE。

  
 $('#w').css({ width: $('#i').width(), height: $('#i').height() }); var htmlFrag = '', id, ids = [], removePix = function () { if (ids.length) { var rand = Math.floor(Math.random()*ids.length); $('#'+ids[rand]).fadeOut(function(){ $(this).remove(); }); ids = ids.slice(0, rand).concat(ids.slice(rand+1)); setTimeout(removePix, 1); } }; for (var i = 0, len = $('#i').height(); i < len; i += 3) { for (var j = 0, len = $('#i').width(); j < len; j += 3) { id = 'pix'+j+'-'+i; ids.push(id); htmlFrag += '
'; } } $('#w').html($('#w').html() + htmlFrag); removePix(); 

见工作示例→

Answer 2

1. 将图像文件加载到图像资源（ imagecreatefrompng ， imagecreatefromgif等）。

2. 使用rand（）确定要显示的像素，或者您想要选择它们。

3. 循环遍历图像中的每个像素，如果它不是您选择显示的像素，则使用imagesetpixel将其着色为灰色。