HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

最新推荐文章于 2021-03-22 05:25:23 发布

iteye_8466

最新推荐文章于 2021-03-22 05:25:23 发布

阅读量222

点赞数

分类专栏： HTML5 动画游戏 javascript 文章标签： html5 javascript html 游戏 ui ViewUI

HTML5 动画游戏同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

效果图：
[img]http://dl2.iteye.com/upload/attachment/0098/4964/c75c17de-85e9-3bb1-aa45-3f1518c1cc22.gif[/img]

点击看效果：
[url]http://www.108js.com/article/canvas/4/inout.html[/url]

欢迎访问博主的网站：[url]http://www.108js.com[/url]

源码如下：（后面有下载）

<!doctype html>
<html>
<head>
<title>界面淡入淡出</title>
<style>
@font-face {
font-family: 'PixelFont';
src: url('font/pixelfont.eot') format('embedded-opentype'),
url('font/pixelfont.woff') format('woff'),
url('font/pixelfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1{
font: 22pt 'PixelFont';
}
</style>

</head>
<body style="background-color:#eee;" >
<h1>Menu</h1>
<div id="GameDiv" style="margin:0 auto;" >
<canvas id="GameCanvas" >
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
<div id="hidden" style="visibility:hidden; width:1px; height:1px; overflow:hidden">
<img id="backgroundMenu" src="img/backgroundmenu.png" οnlοad="MainMenu(this);">
<img id="sprLogo" src="img/logo.png" οnlοad="MainMenu(this);">
<img id="sprSplashLogo" src="img/splashLogo.png" οnlοad="MainMenu(this);">
<img id="sprHTML" src="img/htmlit.png" οnlοad="MainMenu(this);">

</div>
</body>
</html>
<script>

var div = document.getElementById("GameDiv");
div.style.width = "768px";
div.style.height = "512px";
var canvas = document.getElementById("GameCanvas");
canvas.setAttribute("width","768");
canvas.setAttribute("height","512");

var ctx = canvas.getContext("2d");
var patternMenu =null;
var timer=null;

var cx = canvas.width/2;
var cy = canvas.height/2;
var mouseX=10;
var mouseY=10;
var MousePress=false;
var itemsLoaded=0;//当前加载完的图片数
var fadeout = new FadeOut(40);

function MainMenu(item){
itemsLoaded++;//当前加载完的图片数
if(itemsLoaded==4) {
timer=setInterval(start,200);
// start();
}
}

function start(){
ctx.save();
patternMenu=ctx.createPattern(backgroundMenu,"repeat");
ctx.fillStyle = patternMenu;
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.restore();
ctx.drawImage(sprLogo, canvas.width/2 - sprLogo.width/2 , 80);
ctx.drawImage(sprSplashLogo, 70 , 180);
ctx.textAlign = "start";
ctx.font = "12pt 'Segoe UI Light',Verdana";
ctx.fillStyle = "#eee";
ctx.fillText("HTML.it | Guida Videogame HTML5 di Adriano Tumminelli", 60,canvas.height-20);
ctx.drawImage(sprHTML, 5, canvas.height-55);
ctx.shadowOffsetX = 0;
ctx.shadowBlur = 0;
MouseInsideText("New Game",cx, cy+10,"#eee", "#ea4");
MouseInsideText("Other games",cx, cy+80,"#eee", "#ea4");
fadeout.Update();
// requestAnimFrame(start);
}

function MouseInsideText(str, x, y, col1, col2){
ctx.shadowColor = "#000";
ctx.shadowOffsetX = 1;
ctx.font = "32pt 'PixelFont'"
ctx.textAlign = "center";
ctx.shadowBlur = 3;

var w = ctx.measureText(str).width;//字符串的宽
var h = 30;
var inside = (mouseX > x - w/2 && mouseY > y - h && mouseX < x + w/2 && mouseY < y+4 );
if(inside)//鼠标在文本上时
ctx.fillStyle = col2;
else
ctx.fillStyle = col1;
ctx.fillText(str, x, y);
return inside;
}

function FadeOut(time){//主要就是这个了,在整个界面上绘一个透明矩形实现淡入淡出
this.timeStart = time/2;
this.time = this.timeStart;
this.out = true;
this.Update = function(){
ctx.fillStyle = "#000";
if(this.out){
ctx.globalAlpha = 1 - this.time/this.timeStart;
if(this.time-- <= 0){
this.out = false;
this.time = this.timeStart;
}
}
else{
ctx.globalAlpha = this.time/this.timeStart;
if(this.time-- <= 0){
this.time = this.timeStart;
this.out = true;

}

}
ctx.fillRect(-1,-1,canvas.width+1,canvas.height+1);
ctx.globalAlpha = 1;
}
}

//鼠标移动
canvas.οnmοusemοve=function(e) {
var e = window.event || e
var rect = this.getBoundingClientRect();
mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
mouseY =e.clientY - rect.top;

}
//鼠标按下
canvas.onmousedown = function(evt){
var evt = window.event || evt;
MousePress=true;

}

canvas.onmouseup = function(evt){//鼠标松开
var evt = window.event || evt;
MousePress=false;
}

</script>

iteye_8466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

效果图：[img]http://dl2.iteye.com/upload/attachment/0098/4964/c75c17de-85e9-3bb1-aa45-3f1518c1cc22.gif[/img]点击看效果：[url]http://www.108js.com/article/canvas/4/inout.html[/url]欢迎访问博主的网站：[url]http...
复制链接

扫一扫