HTML5 canvas画布元素制作动态花朵动画

废话不多说先上代码

<!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.οnlοad=function() {...}中去使用上述函数。

3.setTimeout("draw("+x+","+y+")",80);一定要给draw()函数加引号，否则马上执行该函数，不再等待0.08s。不要把变量x,y也括在双引号当中，这样会被当成是普通字符串处理。

4.切记每朵花的draw()函数要退出，否则会一直在画布上每2s变淡一次，不会消失。如下图所示：

HTML5 canvas画布元素制作动态花朵动画相关推荐

html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布圆球弹跳动画.html5 跳动的球体代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...
html 穿越星空效果,html5 canvas绚丽3d星空飞行穿梭动画特效
简要教程这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML ...
html做星空网页游戏,html5 canvas绚丽3d星空飞行穿梭动画特效
这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML结构就使用 ...
php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
html5 canvas酷炫3D背景打开动画特效
html5 canvas酷炫3D背景打开动画特效点击跳转到演示地址点击进入资源下载地址
HTML粒子碰撞烟花,html5 canvas漂亮的粒子烟花背景动画特效
特效描述:html5 canvas 漂亮的粒子烟花背景动画特效.html5 canvas漂亮的粒子烟花背景动画特效代码结构 1. HTML代码 class Vector2 { constructo ...
前端实现图片快速反转替换_HTML5开发之canvas实现元素图片镜像翻转动画效果的方法...
一.Canvas图片水平镜像翻转效果预览您可以狠狠的点击这里:canvas图片水平镜像翻转动画demo demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实 ...

HTML5 canvas画布元素制作动态花朵动画

HTML5 canvas画布元素制作动态花朵动画相关推荐

最新文章

热门文章

HTML5 canvas画布元素 制作 动态花朵动画

HTML5 canvas画布元素 制作 动态花朵动画相关推荐

最新文章

热门文章

HTML5 canvas画布元素制作动态花朵动画

HTML5 canvas画布元素制作动态花朵动画相关推荐