H5使用canvas实现星星闪烁效果
2017-03-22 11:43
609 查看
html
[html]
view plain
copy
print?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>star</title>
</head>
<body>
<div>
<canvas id="canvas" width = "800" height="600"></canvas>
</div>
<script type="text/javascript" src="js/stars.js" ></script>
<script type="text/javascript“src="js/main.js"></script>
<script type="text/javascript" src="js/commonFunctions.js" ></script>
</body>
</html>
JS
main.js
[javascript]
view plain
copy
print?
var can;
var ctx;
var w,h;
var girlPic = new Image();
var starPic = new Image();
var num = 60;
var stars = [];
var lastTime,deltaTime;
var switchy;
var life = 0;
function init(){
can = document.getElementById("canvas");
ctx = can.getContext("2d");
w = can.width;
h = can.height;
document.addEventListener("mousemove",mousemove,false);
girlPic.src = "img/girl.jpg";
starPic.src = "img/star.png";
for(var i=0;i<num;i++){
var obj = new starObj();
stars.push(obj);
stars[i].init();
}
lastTime = Date.now();
gameloop();
}
document.body.onload = init;
function gameloop(){
window.requestAnimationFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
drawBackground();
drawGril();
drawStars();
aliveUpdate();
}
function drawBackground(){
ctx.fillStyle ="#393550";
ctx.fillRect(0,0,w,h);
}
function drawGril(){
//drawImage(img,x,y,width,height)
ctx.drawImage(girlPic,100,150,600,300);
}
function mousemove(e){
if(e.offsetX||e.layerX){
var px = e.offsetX == undefined?e.layerX:e.offsetX;
var py = e.offsetY == undefined?e.layerY:e.offsetY;
//判断px py在范围内
if(px>100&&px<700&&py>150&&py<450){
switchy =true;
}
else{
switchy =false;
}
// console.log(switchy);
}
}
[javascript]
view plain
copy
print?
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
stars.js
[javascript]
view plain
copy
print?
var starObj = function(){
this.x;
this.y;
this.picNo;
this.timer;
this.xSpd;
this.ySpd;
}
starObj.prototype.init = function(){
this.x = Math.random()*600+100;
this.y = Math.random()*300+150;
this.picNo =Math.floor(Math.random()*7);
this.timer = 0;
this.xSpd = Math.random()*3-1.5;
this.ySpd = Math.random()*3-1.5;
}
starObj.prototype.update = function(){
this.x += this.xSpd*deltaTime*0.01;
this.y += this.ySpd*deltaTime*0.01;
//this.x 超过范围
if(this.x<100||this.x>693){
this.init();
return;
}
//this.y超出范围 重生
if(this.y<150||this.y>443){
this.init();
return;
}
this.timer +=deltaTime;
if(this.timer>60){
this.picNo += 1;
this.picNo %= 7;
this.timer = 0;
}
}
starObj.prototype.draw = function(){
// save()
ctx.save();
//globalAlpha 全局透明度
ctx.globalAlpha = life;
//drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);
//restore()
ctx.restore();
}
function drawStars(){
for(var i = 0;i<num;i++){
stars[i].update();
stars[i].draw();
}
}
function aliveUpdate(){
if(switchy){ //in area
//show stars
life +=0.3*deltaTime*0.05;
if(life>1){
life = 1;
}
}else{ //out area
//hide stars
life -=0.3*deltaTime*0.05;
if(life<0){
life=0;
}
素材图片
[html]
view plain
copy
print?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>star</title>
</head>
<body>
<div>
<canvas id="canvas" width = "800" height="600"></canvas>
</div>
<script type="text/javascript" src="js/stars.js" ></script>
<script type="text/javascript“src="js/main.js"></script>
<script type="text/javascript" src="js/commonFunctions.js" ></script>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>star</title> </head> <body> <div> <canvas id="canvas" width = "800" height="600"></canvas> </div> <script src="js/main.js"></script> <script type="text/javascript" src="js/commonFunctions.js" ></script> <script type="text/javascript" src="js/starts.js" ></script> </body> </html>
JS
main.js
[javascript]
view plain
copy
print?
var can;
var ctx;
var w,h;
var girlPic = new Image();
var starPic = new Image();
var num = 60;
var stars = [];
var lastTime,deltaTime;
var switchy;
var life = 0;
function init(){
can = document.getElementById("canvas");
ctx = can.getContext("2d");
w = can.width;
h = can.height;
document.addEventListener("mousemove",mousemove,false);
girlPic.src = "img/girl.jpg";
starPic.src = "img/star.png";
for(var i=0;i<num;i++){
var obj = new starObj();
stars.push(obj);
stars[i].init();
}
lastTime = Date.now();
gameloop();
}
document.body.onload = init;
function gameloop(){
window.requestAnimationFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
drawBackground();
drawGril();
drawStars();
aliveUpdate();
}
function drawBackground(){
ctx.fillStyle ="#393550";
ctx.fillRect(0,0,w,h);
}
function drawGril(){
//drawImage(img,x,y,width,height)
ctx.drawImage(girlPic,100,150,600,300);
}
function mousemove(e){
if(e.offsetX||e.layerX){
var px = e.offsetX == undefined?e.layerX:e.offsetX;
var py = e.offsetY == undefined?e.layerY:e.offsetY;
//判断px py在范围内
if(px>100&&px<700&&py>150&&py<450){
switchy =true;
}
else{
switchy =false;
}
// console.log(switchy);
}
}
var can;
var ctx;
var w,h;
var girlPic = new Image();
var starPic = new Image();
var num = 60;
var stars = [];
var lastTime,deltaTime;
var switchy;
var life = 0;
function init(){
can = document.getElementById("canvas");
ctx = can.getContext("2d");
w = can.width;
h = can.height;
document.addEventListener("mousemove",mousemove,false);
girlPic.src = "img/girl.jpg";
starPic.src = "img/star.png";
for(var i=0;i<num;i++){
var obj = new starObj();
stars.push(obj);
stars[i].init();
}
lastTime = Date.now();
gameloop();
}
document.body.onload = init;
function gameloop(){
window.requestAnimationFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
drawBackground();
drawGril();
drawStars();
aliveUpdate();
}
function drawBackground(){
ctx.fillStyle ="#393550";
ctx.fillRect(0,0,w,h);
}
function drawGril(){
//drawImage(img,x,y,width,height)
ctx.drawImage(girlPic,100,150,600,300);
}
function mousemove(e){
if(e.offsetX||e.layerX){
var px = e.offsetX == undefined?e.layerX:e.offsetX;
var py = e.offsetY == undefined?e.layerY:e.offsetY;
//判断px py在范围内
if(px>100&&px<700&&py>150&&py<450){
switchy =true;
}
else{
switchy =false;
}
// console.log(switchy);
}
}commonFunctions.js[javascript]
view plain
copy
print?
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();stars.js
[javascript]
view plain
copy
print?
var starObj = function(){
this.x;
this.y;
this.picNo;
this.timer;
this.xSpd;
this.ySpd;
}
starObj.prototype.init = function(){
this.x = Math.random()*600+100;
this.y = Math.random()*300+150;
this.picNo =Math.floor(Math.random()*7);
this.timer = 0;
this.xSpd = Math.random()*3-1.5;
this.ySpd = Math.random()*3-1.5;
}
starObj.prototype.update = function(){
this.x += this.xSpd*deltaTime*0.01;
this.y += this.ySpd*deltaTime*0.01;
//this.x 超过范围
if(this.x<100||this.x>693){
this.init();
return;
}
//this.y超出范围 重生
if(this.y<150||this.y>443){
this.init();
return;
}
this.timer +=deltaTime;
if(this.timer>60){
this.picNo += 1;
this.picNo %= 7;
this.timer = 0;
}
}
starObj.prototype.draw = function(){
// save()
ctx.save();
//globalAlpha 全局透明度
ctx.globalAlpha = life;
//drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);
//restore()
ctx.restore();
}
function drawStars(){
for(var i = 0;i<num;i++){
stars[i].update();
stars[i].draw();
}
}
function aliveUpdate(){
if(switchy){ //in area
//show stars
life +=0.3*deltaTime*0.05;
if(life>1){
life = 1;
}
}else{ //out area
//hide stars
life -=0.3*deltaTime*0.05;
if(life<0){
life=0;
}
var starObj = function(){
this.x;
this.y;
this.picNo;
this.timer;
this.xSpd;
this.ySpd;
}
starObj.prototype.init = function(){
this.x = Math.random()*600+100;
this.y = Math.random()*300+150;
this.picNo =Math.floor(Math.random()*7);
this.timer = 0;
this.xSpd = Math.random()*3-1.5;
this.ySpd = Math.random()*3-1.5;
}
starObj.prototype.update = function(){
this.x += this.xSpd*deltaTime*0.01;
this.y += this.ySpd*deltaTime*0.01;
//this.x 超过范围
if(this.x<100||this.x>693){
this.init();
return;
}
//this.y超出范围 重生
if(this.y<150||this.y>443){
this.init();
return;
}
this.timer +=deltaTime;
if(this.timer>60){
this.picNo += 1;
this.picNo %= 7;
this.timer = 0;
}
}
starObj.prototype.draw = function(){
// save()
ctx.save();
//globalAlpha 全局透明度
ctx.globalAlpha = life;
//drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);
//restore()
ctx.restore();
}
function drawStars(){
for(var i = 0;i<num;i++){
stars[i].update();
stars[i].draw();
}
}
function aliveUpdate(){
if(switchy){ //in area
//show stars
life +=0.3*deltaTime*0.05;
if(life>1){
life = 1;
}
}else{ //out area
//hide stars
life -=0.3*deltaTime*0.05;
if(life<0){
life=0;
}效果图素材图片
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5使用canvas实现星星闪烁效果
- H5使用canvas实现星星闪烁效果
- 使用canvas实现擦除效果
- 使用jQuery实现点评星星效果
- 使用CanvasGroup实现渐隐渐显效果
- 使用HTML5中的Canvas实现2D水池效果
- 使用canvas实现擦玻璃效果---转载
- 关于伪类的使用的一些心得以及星星评分效果的实现
- echarts使用笔记之实现让折线的拐点闪烁的效果
- android 使用LinearGradient实现手机开机文字闪烁效果
- html5使用canvas实现跟随光标跳动的火焰效果
- Android自定义View使用canvas实现轮播图效果
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
- H5 Canvas结合Arcgis JSAPI实现有背景的TextSymbol效果
- 使用h5的canvas实现两张图片的合并
- 使用jQuery实现点评星星效果
- 使用JavaScript和Canvas实现下雪动画效果
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
- 使用canvas实现擦玻璃效果