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

HTML5 Canvas简单淡入淡出游戏启动界面

html5游戏htmljavascriptcanvas 
阅读更多
欢迎访问博主的网站：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
1
顶
0
踩
分享到：
| HTML5 Canvas贝塞尔曲线动画
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics