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