128kj
- 浏览: 583805 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
效果图：
点击看效果：
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>
点击看效果：
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>
0
顶
顶
0
踩
踩
分享到：
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10024效果图： 效果链接：http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2367效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12896效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7386效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1580效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3201网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1372接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1662接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2335在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2489今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1076效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1661先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1902看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2919一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1292接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1781用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1399点击这里可以查看动画效果： http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 543当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2410<!DOCTYPE HTML> <html& ...
相关推荐
NULL 博文链接：https://128kj.iteye.com/blog/2076185
NULL 博文链接：https://128kj.iteye.com/blog/2085698
html5 canvas绘制射箭小游戏下载 html5 canvas绘制射箭小游戏下载
利用html5 canvas制作的小游戏。
NULL 博文链接：https://128kj.iteye.com/blog/2084722
NULL 博文链接：https://128kj.iteye.com/blog/2083289
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
NULL 博文链接：https://128kj.iteye.com/blog/2088356
Android—BitMap与Canvas学习笔记
HTML5 canvas射击鸭子小游戏
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5 Canvas核心技术 图形、动画与游戏开发
使用 html5 canvas 绘制游戏图像，利用 javascript 实现游戏。 游戏实现了类似英雄无敌3 中战斗场景的回合制玩法： - 对战双方每个生物每一轮有一次行动机会，可以行走或攻击对方。 - 每个生物属性有：行走范围，...
html5 canvas躲避小游戏是男人就撑过20秒躲避游戏源码
高清版 HTML5 CANVAS核心技术图形动画与游戏开发（爱飞翔）.pdf
html5 canvas手机飞机小游戏源码下载 html5 canvas手机飞机小游戏源码下载
HTML5 Canvas推箱子小游戏 HTML5 Canvas推箱子小游戏 HTML5 Canvas推箱子小游戏
html5 canvas简单的五子棋小游戏代码 html5 canvas简单的五子棋小游戏代码