`
128kj
  • 浏览: 604016 次
  • 来自: ...
社区版块
存档分类
最新评论

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

阅读更多
效果图:


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

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

源码如下:(后面有下载)

<!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" onload="MainMenu(this);">
        <img id="sprLogo" src="img/logo.png" onload="MainMenu(this);">
        <img  id="sprSplashLogo" src="img/splashLogo.png" onload="MainMenu(this);">
         <img  id="sprHTML" src="img/htmlit.png" onload="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.onmousemove=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>

  • 大小: 140.7 KB
  • 999.zip (129.8 KB)
  • 下载次数: 2
0
0
分享到:
评论

相关推荐

    HTML5 Canvas学习笔记(3)加载游戏/动画音乐

    在“HTML5 Canvas学习笔记(3)加载游戏/动画音乐”这个主题中,我们将深入探讨如何利用Canvas API来加载和播放音频资源,这对于创建交互式游戏和动画至关重要。 1. HTML5 Audio API HTML5提供了Audio元素,它是网页...

    html5 canvas填色画游戏代码.zip

    这个“html5 canvas填色画游戏代码.zip”压缩包提供了一个基于Canvas的填色游戏,非常适合学习和应用Canvas技术。在这个游戏中,用户可以选择不同的颜色,对预设的图像进行填色,体验类似纸质涂色书的乐趣。 1. **...

    html5 canvas文字变换切换特效.zip

    2. 利用jQuery的`fadeIn()`和`fadeOut()`方法来实现文字的淡入淡出效果。 3. 可能使用`setTimeout`或`setInterval`来定时改变Canvas上的文字内容或属性,创建变换效果。 4. 通过计算和Canvas的`measureText()`方法,...

    HTML5 Canvas透明丝带飘动背景动画特效.zip

    4. **jQuery特效**: jQuery的动画效果功能强大,可以轻松创建淡入淡出、滑动等效果。在这个案例中,jQuery可能用于控制丝带的入场、出场动画,以及丝带飘动过程中的平滑变换。 5. **CSS**: CSS(层叠样式表)在这里...

    HTML5 Canvas在线写字书法练习代码.zip

    jQuery特效和插件标签暗示这个项目可能使用了一些预封装的功能,例如,jQuery的淡入淡出效果,或者一个专门用于Canvas的jQuery插件,用于更方便地处理Canvas上的绘图操作。 总结来说,这个压缩包提供的代码示例展示...

    HTML5 Canvas科幻虫洞旋涡动画特效.zip

    `jquery特效`标签暗示了这个项目可能不仅仅局限于Canvas,还可能结合了jQuery的其他动画功能,如淡入淡出、滑动等,增强了整体的视觉体验。开发者可能会使用jQuery的选择器来选取特定元素,并应用CSS样式或者执行...

    HTML5 Canvas彩色线条合成虚幻背景动画特效.zip

    `jquery特效`通常指的是使用jQuery库实现的各种视觉效果,这可能包括淡入淡出、滑动、缩放等。在这个项目中,jQuery可能被用来添加和管理Canvas元素的动画效果,如线条的动态绘制和颜色变化。 `index.html`是项目的...

    HTML5 Canvas五角星变换特效.zip

    虽然主要描述的是Canvas特效,但在这个项目中,CSS可能用于设置容器样式,或者配合Canvas做一些额外的视觉增强,如背景、阴影或者五角星出现时的淡入淡出效果。 在压缩包中的"jiaoben6829"可能是源代码文件或一个...

    html5 canvas酷炫漂亮爱心动画特效.zip

    jQuery特效通常指的是利用jQuery库创建的各种视觉效果,包括淡入淡出、滑动、旋转、缩放等。在这个爱心动画中,jQuery可能被用来控制爱心的动画流程,如爱心的出现、移动、消失等效果,通过`.fadeIn()`, `.fadeOut()...

    HTML5 Canvas彩色渐变背景动画效果.zip

    jQuery特效是jQuery库的重要部分,提供了一系列预定义的动画效果,如淡入淡出、滑动等。至于提到的jQuery插件,可能是用于增强Canvas动画功能的第三方组件,例如添加更复杂的时间线控制、更丰富的过渡效果等。 `...

    html5 canvas立体图片展示特效.zip

    jQuery还提供了便利的动画功能,如`fadeIn()`、`fadeOut()`,这些可能被用于图片的淡入淡出效果。 CSS3特效可能包括过渡(Transitions)、动画(Animations)和3D转换(Transforms)。过渡用于在两个样式之间平滑地...

    HTML5 Canvas全屏画板涂鸦代码.zip

    `jquery特效`可能是指使用jQuery来实现的一些增强用户体验的功能,比如平滑滚动、淡入淡出效果等。如果存在`jquery插件`,则可能是指引入了额外的jQuery扩展,比如用于更方便地处理Canvas绘图的插件,或者用于提升...

    html5 canvas五彩抽象图形网页动态背景特效.zip

    最后,`jquery特效`标签表明这个项目不仅仅是简单的Canvas使用,还可能包含了一些基于jQuery的高级动画技术,如淡入淡出、滑动、缩放等,这些特效通常与Canvas结合,为用户带来更加生动的交互体验。 总结来说,这个...

    html5 canvas彩虹心形变形动画特效.zip

    `jQuery特效`是指使用jQuery库创建的各种视觉效果,包括淡入淡出、滑动、动画等。在这个彩虹心形变形动画中,jQuery的动画功能可能被用来控制心形的变形速度和方式,以及颜色过渡的平滑度。 在项目中,`index.html`...

    HTML5 Canvas绘制灰太狼图像效果.zip

    至于`jquery特效`,可能是通过jQuery来实现一些动画效果,比如淡入淡出、平移或旋转。这通常涉及到`fadeIn()`, `fadeOut()`, `animate()`等jQuery方法。 最后,`CSS3特效`可能是指HTML元素的样式,比如边框动画、...

    HTML5 Canvas彩色圆点粒子飘动动画特效.zip

    而jQuery特效则可能用于增强页面其他部分的交互性,比如淡入淡出、滑动等效果。 总的来说,这个压缩包提供的是一种使用HTML5 Canvas和jQuery技术实现的动态粒子动画特效。通过理解并解构这些代码,开发者不仅可以...

    HTML5 Canvas雪花散开放大动画特效.zip

    4. **jQuery特效**:jQuery提供了许多内置的动画效果,如淡入淡出、滑动等。虽然在这个特效中可能没有直接使用jQuery的内置动画,但可能利用jQuery来实现某些交互或准备动画状态。 5. **雪花对象**:在JavaScript中...

    html5 canvas鼠标圆点粒子交互式动画特效.zip

    然而,jQuery可能被用来添加额外的交互元素或辅助功能,比如淡入淡出背景或者控制粒子动画的开始和结束。 然后,我们来看看Canvas API。Canvas是一个二维绘图上下文,允许开发者使用JavaScript命令来绘制图形。在这...

    HTML5热气球飞行小游戏代码.zip

    此外,CSS3还可以实现动画,比如热气球上升、下降的平滑效果,或是分数显示的淡入淡出等。 jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在HTML5热气球游戏中,jQuery可以用来...

Global site tag (gtag.js) - Google Analytics