专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > Web前端

canvas奇效-弹跳盒子

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
canvas特效----弹跳盒子

画布特效

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>画布</title>    <style type="text/css">        /*CSS源代码*/        body{            background:#CFCFCF;        }    </style></head><body><!-- HTML代码片段中请勿添加<body>标签 //--><div id="container">    <canvas id="Gbtags"></canvas></div><script>    /*Javascript代码片段*/    window.onload = function()    {        // 获取元素并声明2d        var canvas = document.getElementById("Gbtags");        var ctx = canvas.getContext("2d")        var W = 600,// 设置宽度                H = 400;    // 设置高度        // 设置画布宽高        canvas.width = W;        canvas.height = H;        /*=========== Box  ===========*/        function Box(_x,_y)        {            this.x = _x;            this.y = _y;            // 给盒子速度            this.xVel = 10 + Math.random()*20;            this.yVel = 1;            // 盒子的宽高            this.width = 30            this.height = 30;            // 我们盒子的随机颜色            this.r = Math.round(Math.random()*255);            this.g = Math.round(Math.random()*255);            this.b = Math.round(Math.random()*255);            this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";            ctx.font = 'bold 30pt "microsoft yahei"';            ctx.fillStyle = this.rgba;            ctx.fillText('你好,极客标签', 100, 150);            this.draw = function()            {                ctx.strokeStyle = this.rgba;                ctx.strokeRect(this.x,this.y,this.width,this.height);                this.update();            }            // 为我们的盒子处理我们的逻辑功能            this.update = function()            {                if(this.x < 0) {                    this.x = 0;                    this.xVel *= -1;                }                if(this.x > W - this.width)                {                    this.x = W - this.width;                    this.xVel *= -1;                }                // check the top border                if(this.y < 0) {                    this.y = 0;                    this.yVel *= -1;                }                if(this.y < H - this.height)                    this.yVel += .25;                // 检查底部边界                if(this.y > H - this.height)                {                    // 当它反弹的底部降低球的速度                    this.xVel *= .5                    this.yVel *= .5                    this.y = H - this.height;// 将其定位为0                    this.yVel *= -1; // 使他能够反弹                }                // 添加移动速度到我们的×/y                this.x += this.xVel;                this.y += this.yVel;            }        }        // 制作盒子        var boxes = [];        //我们的屏幕上画的东西的功能:)        function draw()        {            // 背景色            ctx.globalCompositeOperation = "source-over";            ctx.fillStyle = "rgba(0,0,0,0.5)"            ctx.fillRect(0,0,W,H);            ctx.globalCompositeOperation = "lighter"            for(i=0; i < boxes.length; i++)                boxes[i].draw();            update();        }        // 我们的逻辑功能        function update()        {            for(i=0; i < boxes.length; i++)                boxes[i].update();        }        // 我们指定每分钟增加一个盒子        setInterval(function(){            boxes.push( new Box(0,0))        },1000);        //设定间隔,这样我们就可以绘制然后更新我们的画布        //每30毫秒        setInterval(draw,30);    }</script></body></html>

 

 

 

.

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: