本文主要包含html5， Canvas，基本特性等相关知识,匿名希望在学习及工作中可以帮助到您
http:///wiki/1118.html" target="_blank">html5 Canvas 介绍
canvas的基本属性与方法：width,height,getContext()等；
通过width与height来获取和设置当前canvas的宽度、高度；
通过getContext()方法来获取当前画布的绘图环境（context）；
context=canvas.getContext("2d");
context包含了我们需要的，在canvas上绘图的所有方法及属性；
context的笛卡尔坐标系统中，canvas的左上角为原点；从原点往右为X轴的正向，往下为Y轴的正向；
关于坐标的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>s3</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
//以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html>
for(var x = 0.5; x < 550; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for(var y = 0.5; y < 400; y += 10) {
context.moveTo(0, y);
context.lineTo(550, y);
}
context.strokeStyle = "#cecece";
context.stroke();
context.beginPath();
context.moveTo(50, 150);
context.lineTo(300, 150);
context.moveTo(250, 100);
context.lineTo(300, 150);
context.moveTo(300, 50);
context.lineTo(250, 100);
context.moveTo(450, 200);
context.lineTo(300, 50);
/*symmetry*/
context.moveTo(50, 250);
context.lineTo(300, 250);
context.moveTo(250, 300);
context.lineTo(300, 250);
context.moveTo(300, 350);
context.lineTo(250, 300);
context.moveTo(450, 200);
context.lineTo(300, 350);
/*end*/
context.moveTo(50, 150);
context.lineTo(50, 250);
/*write coordinate*/
context.font = "bold 12px sans-serif";
context.fillText("( 0 , 0 )", 8, 5);
context.fillText("(50, 150)", 58, 155);
context.fillText("(300, 150)", 308, 155);
context.fillText("(250, 100)", 258, 105);
context.fillText("(300, 150)", 308, 155);
context.fillText("(300, 50)", 308, 55);
context.fillText("(50, 250)", 58, 255);
context.fillText("(300, 250)", 308, 255);
context.fillText("(250, 350)", 258, 355);
context.fillText("(450, 200)", 458, 205);
context.strokeStyle = "#f00";
context.stroke();
}
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>context的所有属性及方法都是与current state结合使用；
我们在真正理解Canvas是如何工作的之前，current state是必须要掌握的一个概念；
current state 实事上是一个绘图状态的堆栈，这个堆栈从全局范围内适用于整个canvas;
我们可以操作如下一些状态：
Transformation matrix（变换矩阵）
Methods:scale, rotate, transform, and translate
Clipping region（区域裁剪）
Method:clip()
Properties of the context（context属性）
Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.
先简单了解一下，会在以后的文章中对这些属性、方法的使用，慢慢剖析；
国外[oreilly]编写的一个小程序（猜字母）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>s1</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function canvasSupport() {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var guesses = 0;
var message = "Guess The Letter From a (lower) to z (higher)";
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;
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
initGame();
function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed =