HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

128kj

浏览: 600108 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
HTML5 动画游戏

html5 JavaScript html

看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯性了。希望各位老师指出我学习中的错误！！
效果图：

点击看效果：
http://www.108js.com/article/canvas/2/menu.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 cx = canvas.width/2;
var cy = canvas.height/2;
var mouseX=10;
var mouseY=10;
var itemsLoaded=0;//当前加载完的图片数

function MainMenu(item){
    itemsLoaded++;//当前加载完的图片数
    if(itemsLoaded==4) {
          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;
          drawText();
      }
}

   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.textBaseline = 'middle';
        //ctx.textAlign = 'center';
ctx.fillText(str, x, y);
return inside;
    }

    function drawText(){
       MouseInsideText("New Game",cx, cy+10,"#eee", "#ea4");
       MouseInsideText("Other games",cx, cy+80,"#eee", "#ea4");
       setTimeout(drawText,100);
    }

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

     }

</script>

源码下载：

menu.zip (257.4 KB)
下载次数: 3

查看图片附件

0
顶

0
踩

分享到：

HTML5 Canvas学习笔记(3)加载游戏/动画音 ... | HTML5 Canvas学习笔记(1)处理鼠标事件

2014-06-23 23:13
浏览 1975
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论