128kj
- 浏览: 613468 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯性了。希望各位老师指出我学习中的错误！！
效果图：
点击看效果：
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>
源码下载：
效果图：
点击看效果：
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>
源码下载：
0
顶
顶
0
踩
踩
分享到：
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10153效果图： 效果链接：http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2555效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 13003效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7491效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1650效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3337网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1429接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1760接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2447在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2622今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1150效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 2029效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1727先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 3033一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1390接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1903用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2287欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1527点击这里可以查看动画效果： http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 657当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2470<!DOCTYPE HTML> <html& ...
相关推荐
在“WEB学习笔记第三期关于JavaScript的内容”中，我们可以看到一些与图像、多媒体处理以及文本格式化的相关知识。 1. **图像处理**： - 默认情况下，图像没有边框，但可以通过CSS设置边框样式。若未设置链接，...
内容概要：本文详细介绍了利用FLAC3D进行隧道台阶法施工模拟的方法和技术细节。首先解释了隧道台阶法施工的基本流程，重点在于开挖命令的应用，如'zone cmodel assign'和'zone remove'用于改变区域本构模型并执行开挖操作。接着阐述了支护结构的设置方法，包括超前加固体、初衬、二衬、锚杆和锁脚锚杆的具体配置方式。此外，还讲解了如何通过'mesh'命令直接在FLAC3D中生成符合实际工程需求的网格模型。最后展示了模拟后的围岩体位移云图和应力云图，验证了计算结果的有效性，强调了这些数据对优化施工方案的重要性。 适合人群：从事岩土工程、隧道工程及相关领域的工程师和技术人员。 使用场景及目标：适用于需要进行隧道施工模拟的专业人士，旨在提升他们对FLAC3D的理解和应用能力，确保隧道施工的安全性和高效性。 其他说明：文中提供的实例和命令操作均基于真实项目经验，有助于读者更好地理解和掌握FLAC3D的实际应用技巧。
内容概要：本文介绍了纤维骨料细观尺度混凝土模型的设计与应用，重点在于如何通过控制骨料尺寸和体积率，在不同有限元软件（如Abaqus、Ansys、Ls-Dyna、Flac3d）中进行有效的四面体网格划分和六面体网格投影。文中提供了生成随机骨料位置和直径的Python代码片段，并详细解释了网格划分过程中需要注意的技术细节，如碰撞检测、网格转换公式以及材料属性设置。此外，还讨论了模型验证的方法及其在实际工程项目中的应用价值。 适合人群：从事土木工程、材料科学领域的研究人员和技术人员，尤其是那些需要利用有限元方法进行混凝土结构分析的专业人士。 使用场景及目标：①帮助工程师更好地理解和预测纤维混凝土的行为特性；②为实际工程项目提供理论支持和技术指导，从而优化纤维混凝土的应用；③提高仿真精度，减少实验成本和时间。 其他说明：文中提到的一些具体操作步骤和技术细节对于初学者来说可能具有一定挑战性，建议读者在实践中逐步掌握相关技能并积累经验。同时，正确设置物理量单位非常重要，错误的单位可能导致计算结果严重偏离预期。
嵌入式八股文面试题库资料知识宝典-c++个人笔记总结.zip
内容概要：本文详细介绍了西门子S7-1200 PLC在工业自动化领域的应用，重点讲解了其模块、板卡和通讯方式。首先概述了PLC模块和板卡作为基本单元的作用，接着深入探讨了支持的多种通讯协议，包括Modbus-RTU、S7通讯、Modbus-TCP和TCP/IP等。每种协议都配有具体的代码分析和调试方法。最后，介绍了博途V16编程软件的使用体验，强调了其对S7-1200 PLC编程的支持。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对西门子S7-1200 PLC有初步了解或希望深入了解的人群。 使用场景及目标：适用于需要掌握PLC模块化设计、不同通讯协议的应用场景，旨在帮助读者理解PLC的工作原理，提高编程和调试能力，从而更好地应用于实际项目中。 其他说明：文中提供的实例和代码分析有助于读者快速上手，同时推荐使用博途V16及以上版本的编程软件进行实践操作。
内容概要：本文介绍了Comsol仿真软件在等离子体空气反应领域的应用，重点探讨了其无模型反应框架的功能。该框架能模拟超过40种气体（如氧气、氮气、氦气）的详细反应过程，提供碰撞截面数据、迁移率扩散系数、速率系数和汤森系数的查询与求解功能，并通过bosig+模块实现自定义反应路径的选择。此外，文中强调了代码分析与实践应用的重要性，以及这些功能如何提升等离子体反应研究的效率和准确性。 适合人群：从事等离子体物理、化学反应动力学及相关领域研究的专业人士和技术人员。 使用场景及目标：适用于需要精确模拟复杂等离子体环境中气体反应的研究项目，旨在提高对等离子体反应机制的理解，优化实验设计，预测反应行为。 其他说明：Comsol仿真软件凭借其强大的计算能力，在等离子体研究中扮演着重要角色。随着技术的发展，该框架有望进一步推动相关领域的创新和发展。
嵌入式八股文面试题库资料知识宝典-同方万维硬件测试工程师.zip
嵌入式八股文面试题库资料知识宝典-c,c++笔试.zip
少儿编程scratch项目源代码文件案例素材-激光连接.zip
嵌入式八股文面试题库资料知识宝典-奔图电子-软件笔试试题v1.1(C,C++工程师).zip
嵌入式八股文面试题库资料知识宝典-国科环宇有限公司.zip
基于LDA主题模型对AIGC的影响力分析.pdf
可以自己添加应用和功能版，在/opt/upt/apps/下面添加ubin目录和ulib目录，把你想用的程序添加到ubin,支持模块添加到ulib中，就可以运行，具体刷机操作，请看《》
内容概要：本文探讨了遗传算法在车辆路径优化问题（VRP）中的应用及其改进，特别是在冷链物流、软时间窗和多配送中心场景下的路径优化策略。文中介绍了遗传算法通过模拟自然界进化过程来寻找最优路径解决方案的能力，并详细讨论了其在冷链物流中的重要性，即确保产品运输过程中的温度稳定和时效性。此外，还提到了软时间窗概念的应用，以平衡客户满意度和运输成本。在多配送中心场景下，遗传算法能有效处理复杂路径规划问题，如外卖配送路径优化和充电桩电车车辆路径优化。除了遗传算法，蚁群算法、模拟退火算法和粒子群算法也在不同类型的路径优化问题上得到广泛应用，如旅行商问题（TSP）、容量约束的车辆路径规划（CVRP）和带距离、容量和时间窗约束的车辆路径规划（VRPTW）。最后，文章强调了遗传算法改进的研究方向，旨在提高运算速度和精度，从而提升物流效率和客户满意度。 适合人群：从事物流与运输领域的研究人员和技术人员，对车辆路径优化感兴趣的学者和从业者。 使用场景及目标：适用于冷链物流、外卖配送、充电桩电车等多种实际应用场景，旨在优化路径规划，降低运输成本，提高客户满意度。 其他说明：本文不仅介绍了现有算法的应用情况，还指出了未来可能的研究方向和发展趋势。
内容概要：本文详细介绍了物流领域的车辆路径优化（VRP）及其扩展问题——带时间窗的车辆路径优化（VRPTW），并探讨了冷链物流车辆路径优化（考虑充电桩需求）。文中通过MATLAB实现了遗传算法解决这些问题的具体步骤，包括参数设置、种群初始化、适应度函数计算、遗传算法循环等。此外，还讨论了多配送中心场景下的路径优化挑战和其他优化算法（如蚁群算法、粒子群算法、节约算法和模拟退火算法）的应用。最后，针对冷链物流和电动汽车路径优化提出了具体的解决方案和技术细节。 适合人群：从事物流管理、运筹学、算法设计的研究人员和工程师，尤其是对MATLAB有一定基础的技术人员。 使用场景及目标：适用于需要优化物流配送路径的企业和个人，旨在提高配送效率、降低成本、提升服务质量。具体应用场景包括但不限于城市配送、冷链运输、电动车辆调度等。 其他说明：文中提供了完整的MATLAB代码示例，帮助读者更好地理解和实践各种优化算法。同时，强调了不同算法的特点和适用条件，便于读者根据实际情况选择最合适的算法。
嵌入式八股文面试题库资料知识宝典-文思创新面试题2.zip
嵌入式八股文面试题库资料知识宝典-网络编程.zip
少儿编程scratch项目源代码文件案例素材-火柴人防御.zip
AI数字形象制作口播视频