欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

Html5的Canvas雪花特效

创建时间:2014年07月12日 10:44  阅读次数:(6544)
分享到:


这个效果还不错吧,这是html5的Canvas效果,源码如下:
<canvas id="mc" width="420" height="280" style="border:1px solid black" ></canvas >
<script type="text/javascript" >
function createFlower(context,n,dx,dy,size,length){
    context.beginPath();
    context.moveTo(dx,dy+size);
    var dig = 2*Math.PI/n;
    for(var i=1;i<n+1;i++){
        var ctrlX = Math.sin((i-0.5)*dig)*length+dx;
        var ctrlY = Math.cos((i-0.5)*dig)*length+dy;
        var x = Math.sin(i*dig)*size+dx;
        var y = Math.cos(i*dig)*size+dy;
        context.quadraticCurveTo(ctrlX,ctrlY,x,y);
    }
    context.closePath();
}
snowPos = [
{x:50,y:44,z:5},{x:140,y:35,z:3},
{x:360,y:20,z:1},{x:250,y:50,z:2},
{x:110,y:90,z:4},{x:310,y:85,z:2},
{x:65,y:160,z:5},{x:205,y:130,z:5},
{x:300,y:150,z:3},{x:260,y:210,z:1},
{x:375,y:215,z:3},{x:155,y:230,z:2},
{x:30,y:270,z:4},];
function fall(context){
    context.fillStyle = "#000";
    context.fillRect(0,0,420,280);
    context.fillStyle = "#fff";
    for(var i=0,len=snowPos.length;i<len;i++){
        context.save();
        context.translate(snowPos[i].x,snowPos[i].y);
        context.rotate((Math.random()*6-3)*Math.PI/10);
        snowPos[i].y += Math.random()*18;
        if(snowPos[i].y >280){
            snowPos[i].y=4;
        }
        createFlower(context,6,0,0,snowPos[i].z,8);
        context.fill();
        context.restore();
    }
}
var canvas = document.getElementById("mc");
var ctx = canvas.getContext("2d");
setInterval("fall(ctx);",200);
</script >
E
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 86+12=? 的结果(结果是:98)
结  果: