本文通过一个猜字母游戏示例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()方法，可以获得当前渲染的画板的位图文件。
分享到：
相关推荐
这个“canvas简单实例详解”将带你深入了解Canvas的基本用法和常见操作，为你的网页开发添加丰富的视觉效果。 一、Canvas基本结构 Canvas元素在HTML中以`<canvas>`标签表示，可以通过ID来引用并进行JavaScript操作...
这个“最佳canvas入门实例——水球，圆环”旨在引导初学者掌握Canvas的基本用法和技巧，通过实际操作来理解其工作原理。 首先，让我们深入了解一下Canvas。Canvas是一个基于矢量图形的画布元素，通过JavaScript来...
总的来说，这篇博客应该是为初学者提供了一个逐步学习HTML5 Canvas的教程，通过实例讲解了Canvas的基本操作和应用，对于提升Web开发中的图形处理能力大有裨益。如果想深入了解，建议直接访问提供的博客链接，结合...
在“canvas小实例”中，我们可能会遇到以下核心概念和方法： 1. `drawImage()`: 这是`CanvasRenderingContext2D`的核心方法，用于将图像（包括图片、画布或其他图像）绘制到画布上。例如： ```javascript var img...
说明：Delphi6 Canvas画特效图片：颜色渐变 核心技术：DelphiTColor(R,G,B:Integer):TColor; Google搜索：inttohex(,stringtocolor(,DelphiTColor(,ColortoRGB(,垂直翻转,Bitmap
全书分为18章，分别讲解了UI布局实例集锦、控件实例集锦、自动化服务实例集锦、数据存储实例集锦、电话和短信实例集锦、图形图像实例集锦、和网络有关的实例集锦、多媒体实例集锦、Google地图实例集锦、GoogleAPI...
html5 canvas源码实例集，是一本书的中例子，用Canvas进行图形绘制、图像控制等各方面的有关Canvas操作的实例，一共有接近20M的实例，是学习HTML5 Canvas绘图不可错过的范例集。
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
本实例是关于如何利用JS和Canvas API创建一个功能丰富的在线画板应用。 首先，Canvas是一个HTML5的标签，它提供了一个2D渲染上下文，允许我们直接在网页上绘制图像。在这个"canvas画板实例"中，我们可以通过...
"超多经典canvas实例"这个资源集合，显然是为了帮助开发者深入理解和掌握Canvas的使用技巧。在这个压缩包`canvas-special-master`中，可能包含了各种各样的Canvas应用示例，涵盖了基础到高级的各种功能。 首先，...
HTML5 Canvas 初级入门教程 HTML5 Canvas 是 HTML5 中一个非常重要的功能，它允许开发者在浏览器中绘制图形，而不需要使用任何插件。这个功能可以在所有现代浏览器中使用，包括 Internet Explorer 9、Safari 3、...
html5 canvas绘图实例代码集，比较多的Canvas实例演示Demo，不光只有Canvas，还有其它的一些HTML5应用，对于学习HTML5技术相当有帮助，现在移动设备端已广泛应用HTML5技术。
它不仅全面讲解了Canvas元素的API，以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发，还包含大量实例：可操作性极强。 《HTML5Canvas核心技术：图形动画与游戏开发》...
HTML5的Canvas小游戏实例，尤其是基于拼图游戏的开发，是Web前端开发中一个有趣的实践项目，它结合了HTML5、Canvas、JavaScript以及CSS等多种技术。在这个游戏中，玩家需要通过移动图片碎片来完成完整的图像，这既...
### HTML5 Canvas 入门教程 #### 一、引言 HTML5 Canvas 是一个非常强大的功能，它允许开发者使用 JavaScript 在网页上绘制图形。Canvas 的出现极大地扩展了 Web 应用程序的可能性，使得动态和交互式的图形成为...
超多经典canvas实例 普及： < <canvas>元素用于在网页上绘制图形这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。 注意：IE 8以及更早的版本不支持<canvas>元素。 贴士：全部示例都分享在我的...
【Canvas入门教程笔记】 Canvas API 是HTML5引入的一项重要特性，允许开发者在网页上动态生成图像，通过JavaScript来实现各种图形的绘制。Canvas是一个二维的画布元素，它本身不包含任何行为，但提供了一个API，使...
本源码包“CANVAS FOR HTML5从入门到精通”涵盖了从基础操作到高级应用的全方位学习材料，下面将对其中涉及的关键知识点进行详细介绍。 1. **基础概念**：HTML5的CANVAS是一个可编程的图形区域，通过JavaScript来...
今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的...