本文通过一个猜字母游戏示例canvas的基本用法结构
<!doctype html>
<html lang="zh">
<head>
<meta charset="GBK">
<title>HTML5-猜字母</title>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOne" width="500" height="300"></canvas>
<form>
<input type="button" id="createImageData" value="导出图片"/>
</form>
</div>
</body>
</html>
HTML5首行总应以此开头：
<!doctype html>
canvas标签有两个属性：width、height用来表示画板的宽和高，使用style="width:xx;height:xx"是达不到这种效果的。
window.addEventListener('load', canvasApp, false);
function canvasApp(){
var guesses = 0;
var message = '猜一猜从a(低)到z(高)的字母';
var letters = [
'a', 'b', 'c', 'd', 'e', 'f', 'g',
'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't',
'u', 'v', 'w', 'x', 'y', 'z'
];
var today = new Date();
var letterToGuess = '';
var higherOrLower = '';
var lettersGuessed;
var gameOver = false;
var theCanvas = document.getElementById('canvasOne');
if(!theCanvas || !theCanvas.getContext){
return;
}
var context = theCanvas.getContext('2d');
initGame();
function initGame(){
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener('keyup', eventKeyPressed, false);
var formElement = document.getElementById('createImageData');
formElement.addEventListener('click', createImageDataPressed, false);
drawScreen();
}
function eventKeyPressed(e){
if(!gameOver){
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
lettersGuessed.push(letterPressed);
if(letterPressed===letterToGuess){
gameOver = true;
}else{
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
if(guessIndex<0){
higherOrLower = '不是合法字母';
}else if(guessIndex<letterIndex){
higherOrLower = '低了';
}else{
higherOrLower = '高了';
}
}
drawScreen();
}
}
function drawScreen(){
context.fillStyle = '#FFFFAA';
context.fillRect(0, 0, 500, 300);
context.strokeStyle = '000000';
context.strokeRect(5, 5, 490, 290);
context.textBaseline = 'top';
context.fillStyle = '#000000';
context.font = '10px _sans';
context.fillText(today, 150, 10);
context.fillStyle = '#FF0000';
context.font = '14px _sans';
context.fillText(message, 125, 30);
context.fillStyle = '#109910';
context.font = '16px _sans';
context.fillText('已猜：'+guesses+' 次', 215, 50);
context.fillStyle = '#000000';
context.font = '16px _sans';
context.fillText('本次：'+higherOrLower, 150, 125);
context.fillStyle = '#FF0000';
context.font = '16px _sans';
context.fillText('猜过的：'+lettersGuessed.toString(), 10, 260);
if(gameOver){
context.fillStyle = '#FF0000';
context.font = '40px _sans';
context.fillText('哦也！猜对了！', 150, 80);
}
if(lettersGuessed.length>15){
context.fillStyle = '#FF0000';
context.font = '40px _sans';
context.fillText('真挫！', 150, 80);
gameOver = true;
}
}
function createImageDataPressed(){
window.open(
theCanvas.toDataURL(),
'canvasImage',
'left=0,top=0,width='+theCanvas.width+',height='+theCanvas.height,
toolbar=0,
resizable=0);
}
}
1) 通过检查 canvas对象的getContext属性是否存在，可以简单判断当前浏览器是否支持canvas;
2) canvas是即时的，习惯上通过监听window的加载事件，执行canvas相关程序，同时可以保持特定作用域：
window.addEventListener('load', canvasApp, false);
3) 通过 var context = theCanvas.getContext('2d'); 方法可以获得HTML5的2D上下文，
即CanvasRenderingContext2D对象。
4) 通过canvas对象的toDataURL()方法，可以获得当前渲染的画板的位图文件。
分享到：
相关推荐
标题：Tkinter入门级学习资料 描述：这份资料是经典的Tkinter入门学习资源，旨在介绍如何使用Python编程语言构建图形用户界面（GUI）。 知识点详解： ### 1. Tkinter是什么？ Tkinter是Python的标准GUI库，允许...
#### 第一章：Java语言入门 **1.1 Java的诞生** - **背景介绍**：Java是由Sun Microsystems公司于1995年推出的面向对象编程语言。 - **目的**：旨在解决C++语言中存在的问题，如内存管理复杂、安全性低等问题。 - ...
Amber16 是一款在分子模拟与计算化学领域广泛应用的软件工具。它广泛应用于生物化学、药物设计、生物分子、生物大分子以及材料科学中的分子动力学模拟和相关计算研究。 用途 1. 生物分子模拟：模拟蛋白质、核酸、多糖等生物大分子的动态行为，研究其结构与功能的关系。 2. 药物设计与分子对接：分析小分子药物与生物靶标的结合模式，优化药物设计。 3. 膜蛋白模拟：利用 Lipid16 力场模拟磷脂双分子层，研究膜蛋白的结构与功能。 4. 能量计算与优化：进行能量最小化、自由能计算等，研究分子间的相互作用。 5. 轨迹分析：分析模拟轨迹，计算均方位移、RMSD、RMSF 等参数。 6. 力场转换与扩展：支持多种力场的转换和扩展，例如 CHARMM、AMOEBA。 技术关键词 - 分子动力学（MD）：通过数值模拟研究分子在一定时间内的运动。 - 力场（Force Field）：如 Amber 力场、Lipid14 力场，用于描述分子间的相互作用。 - GPU 加速：PMEMD 模块支持 GPU 加速，显著提高计算效率。
59.基于51单片机的汽车倒车防撞报警系统（实物）.pdf
人工智能神经网络及其应用主要包含以下六大核心要点： 一、基础概念与核心结构 1. 定义与组成 2. 工作原理 二、常见神经网络架构 3. 卷积神经网络（CNN） 4. 循环神经网络（RNN） 5. 生成对抗网络（GAN） 6. Transformer 三、关键技术组件 7. 激活函数 8. 优化算法 9. 正则化技术 四、核心应用领域 10. 信息处理与模式识别 11. 医疗健康 12. 交通与工业 13. 金融与经济 14. 生成式应用 五、发展趋势 15. 算力与模型优化 16. 多模态融合 17. 轻量化与边缘计算 六、挑战与伦理问题 18. 数据依赖与可解释性 19. 安全与隐私 20. 伦理与监管
10.基于51单片机的密码锁设计（仿真+实物）
MySql导出表结构到Word文档 支持导出MySQL数据库表结构！！ 运行环境：jdk8+,需要Java运行环境
华为USG5500、USG5530系列升级固件v300r001c10spc600.bin
Delphi 12.3控件之手机秒变扫码枪，扫付款码收款Delphi FMX源代码多平台.rar
1、文件说明： Centos8操作系统tuned-profiles-oracle-2.16.0-1.el8.rpm以及相关依赖，全打包为一个tar.gz压缩包 2、安装指令： #Step1、解压 tar -zxvf tuned-profiles-oracle-2.16.0-1.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
小说阅读网站，主要的模块包括查看；管理员；首页、个人中心、读者管理、作者管理、小说信息管理、小说分类管理、余额充值管理、购买小说管理、下载小说管理、系统管理，读者；个人中心、余额充值管理、购买小说管理、下载小说管理、我的收藏管理等，作者：个人中心、小说信息管理、小说分类管理、余额充值管理、购买小说管理、下载小说管理、我的收藏管理。首页：小说信息、我的、跳转到后台功能。系统中管理员主要是为了安全有效地存储和管理各类信息，还可以对系统进行管理与更新维护等操作，并且对前后台有相应的操作权限。 要想实现小说阅读网站的各项功能，需要后台数据库的大力支持。管理员验证注册信息，收集的读者信息，并由此分析得出的关联信息等大量的数据都由数据库管理。本文中数据库服务器端采用了Mysql作为后台数据库，使Web与数据库紧密联系起来。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 本系统的开发使获取小说阅读网站信息能够更加方便快捷，同时也使小说阅读网站信息变的更加系统化、有序化。系统界面较友好，易于操作。 关键词：小说阅读网站 ；jsp ；Mysql
284.基于51单片机的风扇【自然风，手动，电位器，ADC0808】（仿真）.pdf
山东大学软件学院计算机网络实验
linux mipi-camera驱动程序 s5k33d_48
内容概要：本文档是重庆大学针对软件工程专业开设的一门《移动互联网技术及应用》的详细教学大纲。课程分为多个模块，涵盖了移动互联网的现状和技术基础、不同应用场景及其商业模式、案例分析和实践操作。课程还关注于手机网站开发、应用程序构建及特定功能如GPS定位的应用等方面的技术，旨在培养学生的理论素养和技术实现能力，最终能够独立完成一个移动互联网创新项目。评分依据为出勤和课堂表现的过程评价与作品的实际效果实践评价相结合的方式。 适合人群：即将就读或者正在研读移动互联网相关专业的高校研究生，尤其是已掌握Web开发基础并有意深入探究移动互联网技术方向的学生。 使用场景及目标：此课程非常适合那些计划未来投身于快速发展的移动互联行业的年轻人；它不仅可以加深他们对该行业最新趋势的理解，还可以锻炼实际解决问题的能力。 其他说明：教学材料包括一系列权威性的书籍作为参考资料，帮助学员更广泛地获取知识。此外，通过一系列有针对性的设计任务和小组合作的学习形式进一步提高学生的综合技能水平。
眼动数据 - 副本.zip
20250323.pcapng
2025年3月CCF编程能力认证（C++）五级.pdf
yolo