废话不多说 先上代码
<!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变淡一次，不会消失。如下图所示：
时间： 2024-10-09 21:51:25