canvas特效----弹跳盒子

suwu0

2018-02-06

画布特效

<!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>

canvas canvas元素