南通地区最受信赖的IT培训 | 南通大学计算机专业学生实习实训基地 | 崇川区政府指定信息化建设辅导站 | 
快捷导航
开启左侧

HTML5Canvas万花筒旋转动画

[复制链接]
admin 发表于 2017-6-30 09:32:29 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas万花筒旋转动画 - 源码之家</title>
<style>
body{
    background: #000;
}
canvas{
    background: #ddd;
}
</style>
</head>
<body>
<center>
<canvas id="canvas" width="600" height="600"></canvas>
</center>
<script>
    window.onload=function(){
        var then=new Date().getTime();
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var arr=[];
        ctx.globalAlpha=0.5;
        ctx.fillStyle="#8e6ca7";
        setInterval(function(){
            var nowTime=new Date().getTime();
            var lag=(nowTime-then)/1000;
            then=nowTime;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for(var i=0;i<arr.length;i++){
                arr.num+=5;
                arr.scaleNum-=0.005;
                arr.distanceNum-=(0.1*25)*lag;
                ctx.beginPath();
                ctx.save();
                ctx.translate(canvas.width/2,canvas.height/2);
                ctx.rotate(arr.num*Math.PI/180);
                ctx.scale(arr.scaleNum,arr.scaleNum);
                ctx.fillRect(arr.distanceNum,0,80,60);
                ctx.restore();
                if(arr.scaleNum<0){
                    arr.splice(i,1);
                }
            }
        },40);
        setInterval(function(){
            var arrInit={
                num:0,
                scaleNum:1,
                distanceNum:200
            };
            arr.push(arrInit);
        },80);
    }
</script>

<div style="text-align:center;">
<p>来源:<a href="http://www.java80.com/" target="_blank">Java免费资源下载</a></p>
</div>
</body>
</html>
我要成为牛B程序员
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

0粉丝

207帖子

会员达人更多+
广告位

信息推荐

更多+

最新信息

更多+

关注我们:南通青鸟IT教育

官方微信

咨询热线:

0513-89197166

地址:江苏南通跃龙南路182号数字大厦二层

邮编:226000 Email:sujingjing@ntqingnia.com

Copyright   ©2017  青鸟IT教育  Powered by©NTQN       ( 办学许可证号:教民13206027zx00201 苏ICP备09098946号 )