废话不多说 先上代码
<!doctype><html><head><meta charset="utf-8"></head><body style="text-align:center;"><canvas id="canvas" width="1300px" height="580px" style="border:2px black solid;"></canvas><script>var imge = new Image(100 ,100);imge.src = "hh.png";var a = new Array(); a[0] = "2.png";var cans = document.getElementById("canvas");var cc = cans.getContext("2d");cc.save();var num=0;function zuobiaox() {var x = Math.floor(Math.random()*1200);return x;}function zuobiaoy() {var y = Math.floor(Math.random()*480);return y;}imge.onload = function() {chanhua();}function chanhua() {cc.fillstyle="white";cc.fillRect(0,0,1300,580);//cc.save();//一定要清理画布，这样才能清理残留在画布上的像素，还你一个亮白如新的画布~请用纳爱斯cc.clearRect(0,0,1300,580);var x = zuobiaox();var y = zuobiaoy();//bian(imge);var ww= 70+Math.floor(Math.random()*100);cc.drawImage(imge, x, y,180,180);//setInterval("draw(imgdata, x, y,1.3)",1000);//ceshi(x,y,13);num =0;draw(x,y);//cc.restore();setTimeout("chanhua()",2000);}function draw(x,y) {var img = cc.getImageData(x,y,180,180);for(var i = 0,len = img.data.length; i <len; i+=4){img.data[i+3] = img.data[i+3] * 0.8;}cc.putImageData(img,x,y);num++;if(num>20){//alert("ok");clearTimeout(st);//如果没有return，就会导致之前出现过花的位置都继续保持return;}var st = setTimeout("draw("+x+","+y+")",80);}//setInterval(img.onload,2000);</script><a href="#"><img src = "hh.png" width="100px"></a></body></html>
函数解释：
chanhua()：利用位图在画布随机位置上绘制花朵。每隔2s调用一次该函数，每次调用都会清理画布
draw():对位图进行特效处理，进行像素处理，利用getImageData()，获取画布上某一区域像素，对该区域像素进行透明度处理。在通过putImageData()将处理好的像素放在原位置。每0.08s调用一次该函数，调用20次，每次调用花的透明度增强，到最后一次时，花几近透明（几近透明的说法是准确的，因为此时花的透明度已达到0.0000…0x了，所以不是完全透明，但是已经看不出来了）。
注意事项：
1.由于出现过花的地方还是有残留像素存在，当相同地方再次出现花朵时，会对新花产生影响，所以在每次生成花朵时要清理一次画布，，利用clearRect()函数，宽和高与画布保持一致。
2.一定要在图片加载完成后再去利用图片，img.onload=function() {…}中去使用上述函数。
3.setTimeout("draw("+x+","+y+")",80);一定要给draw()函数加引号，否则马上执行该函数，不再等待0.08s。不要把变量x,y也括在双引号当中，这样会被当成是普通字符串处理。
4.切记每朵花的draw()函数要退出，否则会一直在画布上每2s变淡一次，不会消失。如下图所示：
少吃点，吃好的。
