欢迎访问博主的网站：
http://www.108js.com
查看效果：
http://www.108js.com/article/article3/game/ex1/exam.html
效果图：
一、HTML代码：
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='gbk' />
<title>HTML5 Canvas 简单淡入淡出__www.108js.com</title>
<script src='introState.js'></script>
</head>
<body>
<canvas id='canvas' width='700' height='500'> 你的浏览器不支持canvas</canvas>
</body></html>
<script>
var requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
} )();
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var intro;
var w=canvas.width;
var h=canvas.height;
var timer;
document.onkeydown = function(event){
var code = event.keyCode || event.which;
if(code==13){
cancelRequestAnimFrame(timer);
gameStart();
}
}
function init() {
intro=new introState();
animation();
}
function animation(){
intro.update();//更新
intro.draw(ctx,w,h);//绘制
timer=requestAnimFrame(animation);
};
function gameStart() {
alert("游戏开始");
paintCanvas();
}
function paintCanvas() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
}
init();
</script>
二、introState.js
代码就不贴了，请下载。
- 大小: 2.2 KB
分享到：
相关推荐
在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中，我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果，这是一个增强用户体验的重要技巧，尤其在游戏加载、场景切换或过渡效果中。 首先，淡入淡出...
TweenJS则用于实现平滑的过渡和动画效果，比如元素的淡入淡出或移动。SoundJS处理音频播放，确保游戏音效的正常运作，而PreloadJS则帮助加载和管理游戏资源，如图片、音频文件等。 在这个消消乐游戏中，开发者可能...
通过使用`.animate()`方法，开发者可以轻松地创建平滑过渡和动画效果，模仿Windows 8 Metro界面中的滑动、缩放和淡入淡出等动态效果。同时，jQuery的事件处理和选择器功能也能帮助开发者快速响应用户的交互行为，...
7. 动画与特效：通过CSS3的动画或者JavaScript实现物体的移动、旋转、淡入淡出等效果，提升游戏的视觉吸引力。 通过分析这个游戏的源码，开发者可以学习到如何组织和管理一个H5游戏项目，以及如何使用HTML5 Canvas...
5. **Actions**：动作是改变节点属性（如位置、旋转、缩放）的动画效果，如移动、旋转、淡入淡出等，让游戏更具动态性。 6. **Tiled Maps**：对于复杂的游戏地图，Cocos2D支持Tiled地图格式，方便地创建和管理多层...
通过`.animate()`方法，开发者可以实现平滑的移动、缩放、淡入淡出等效果，比如飞机的飞行轨迹、爆炸效果等，增强游戏体验。 4. **Ajax交互**：如果游戏需要在网络环境中获取数据或更新分数，Ajax是理想的选择。...
Unity提供了Audio Source和Audio Listener组件来处理音频播放，通过调整各种参数，如音量、淡入淡出效果，可以创造出丰富的听觉体验。 游戏中的交互性往往需要物理模拟。Unity的2D物理引擎能处理碰撞检测和物体运动...
"android动画"这个主题主要涉及到Android系统中对图形元素进行动态变换的技术，这在描述中的应用示例是通过淡入淡出动画来实现图片与登录界面的平滑过渡，就像在微博应用中看到的效果一样。 在Android中，动画可以...
2. **过渡效果设计**：根据游戏风格和需求，设计合适的过渡效果，如淡入淡出、滑动、扭曲、缩放等。这些效果可以通过图形库（如OpenGL ES）或Android的Canvas API来实现。 3. **渲染目标的设定**：使用FBO创建一个...
9. **动画效果**：为了让界面更具动态感，可以添加一些动画效果，如消息发送后的淡入淡出、滑动切换页面的平滑过渡等。这需要了解Android的动画框架，如ObjectAnimator或Transition动画。 10. **版本兼容性**：由于...
2. 动画效果：使用帧动画或者Canvas进行图形绘制，实现消除后的动画效果，如淡入淡出、缩放等。 3. 音效处理：利用MediaPlayer类加载音频文件，控制播放、暂停和停止，根据游戏事件触发相应音效。 4. 界面交互：监听...
6. **动画效果**：为了提升用户体验，可以在滑动页面之间添加平滑过渡的动画效果，如淡入淡出、缩放等。这可以通过`ViewPager.PageTransformer`接口实现。 7. **交互设计**：引导界面不仅仅是展示，还应鼓励用户...
4. **Canvas渲染**：HTML5的Canvas元素可以用于动态渲染视频帧，这可能被用于实现更复杂的过渡效果，比如淡入淡出或者自定义过渡动画。通过`canvas.getContext('2d')` 获取2D渲染上下文，并使用`drawImage()` 方法将...
9. **动画效果**：连连看游戏中的消除图标通常会有动画效果，例如淡入淡出或滑动消失。Tkinter的`after`方法可以用来实现定时更新，从而创建动画效果。 10. **错误处理**：良好的错误处理能提升用户体验，例如处理...
此外，为了增加用户体验，开发者可能会利用jQuery的动画功能，如淡入淡出效果，来增强计时器启动和暂停时的视觉反馈。还可以通过监听按钮的点击事件，使用`.on('click', function() {...})`来实现按钮的交互逻辑。 ...
4. **音频管理**：Phaser 支持多种音频格式，包括 MP3、WebM 和 OGG，可以轻松地播放背景音乐和音效，并且提供了音量控制、淡入淡出等效果。 5. **状态管理**：游戏通常包含多个阶段，如加载、主菜单、游戏关卡等。...
根据标题"集画图工具 启动画面 对话框弹出效果于一身（自己做的）"，我们可以推断这是一个自定义的软件，它集成了画图功能、启动界面以及对话框的动态展示效果。这涉及到图形用户界面（GUI）设计、图形处理、事件...
在移动设备上，用户体验往往受到屏幕尺寸和交互方式的限制，因此设计师们常常采用各种创新的动画效果来提升用户界面的吸引力和可用性。"15款手机端打开菜单动画过渡特效.zip"这个压缩包中包含的就是一系列专为手机端...
- Android的Animation类库支持简单的动画效果，如棋子消除时的淡入淡出、棋盘刷新等。 - 动画效果可以增强用户体验，使游戏更生动。 四、性能优化 1. **内存管理** - 对于复杂的棋盘逻辑，避免内存泄漏和过度...