一.检测浏览器是否支持canvas
if( !canvas || !canvas.getContext){
return;
}
也可以使用modernizr.js库，Modernizr是一个易用的轻量级库，可以检测各种web技术的支持情况。
二.canvas的属性
主要属性： id:id在Javascript代码中用来指定特定的<canvas>标签的名字； width:画布的宽度，以像素为单位； height:画布的高度，以像素为单位。
其他属性：tableindex, title, class, accesskey, dir, draggable, hidden.
三.获取2D环境
通过调用Canvas对象的getContext()方法，可以获得HTML5 的2D环境对象（CanvasRenderingContext2D）.该对象包含了在画布上绘图所需的所有方法和属性。画布的左上角为原点(0,0),坐标轴向下、向右为正方向。
获取了2D环境之后可以干什么呢？能做的事有很多，比如使用strokeStyle, fillStyle ,globalAlpha, lineWidth, lineCap, line, join, miterLimit, shadowOffsetX,
shadowOffsetY, shadowBlur, shadowColor, global, font, CompositeOperation, textAlign, textBaseline这些属性以及一些方法来制作游戏和动画。
四.使用canvas
.在html文档中的写法，通常是这样的：
<canvas id="canvas" width="500px" height="500px"></canvas>
注：对于canvas的宽和高，要在标签里定义，因为canvas的属性width和height和CSS里的width和height是不一样 的，canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而css的width和height是canvas在 浏览器中被渲染的高度和宽度。但是可以利用css的width和height来缩放canvas。
在javascript里获取canvas对象及2D环境：
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2D");
五.实际应用（猜字母游戏：计算机随机给出一个字母，用户猜给出的字母是什么，如果不对，会提示你猜的偏大还是偏小）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
window.addEventListener("load" , eventWindowLoad, false);
var Debugger = function() {};
Debugger.log = function (message) { //输出信息调试
try{
console.log(message);
}catch(exception){
return;
}
}
function eventWindowLoad() {
canvasApp();
}
function canvasApp() {
if( !canvas || !canvas.getContext ){
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var guess = 0;
var message
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;
initGame();
function initGame() {
var letterIndex = Math.floor(Math.random()*letters.length);
letterToGuess = letters[letterIndex];
guess = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keydown", eventKeyPressed, true);
drawScreen();
}
function eventKeyPressed(e) {
if(!gameOver){
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guess++;
lettersGuessed.push(letterPressed);
if(letterPressed == letterToGuess){
gameOver = true;
}else{
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
Debugger.log(guessIndex);
if(guessIndex < 0){
higherOrLower = "That is not a letter";
}else if(guessIndex >letterIndex){
higherOrLower = "Lower";
}else{
higherOrLower = "Higher";
}
}
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";
context.fillText(today, 150, 10);
context.fillStyle = "#ff0000";
context.font = "14px";
context.fillText(message, 125, 30);
context.fillStyle = "#109910";
context.font = "16px";
context.fillText("Guesses:" + guess, 125, 50);
context.fillStyle = "#000000";
context.font = "16px";
context.fillText("higherOrLower:" + higherOrLower, 150, 125);
context.fillStyle = "#ff0000";
context.font = "16px";
context.fillText("Letter Guessed:" + lettersGuessed.toString(), 10, 260);
if(gameOver){
context.fillStyle = "#ff0000";
context.font = "40px";
context.fillText ("You got it!", 150, 180);
}
}
}
}
</script>
</html>
上例用到的知识点：
context.fillStyle:定义填充的颜色；context.strokeStyle:定义填充边缘的颜色； context.fillRect(x, y,width,height):绘制一个矩形，x是绘制的矩形的左上角的x坐标,y是绘制的矩形的左上角的y坐标,width：是绘制的矩形的宽度,height是绘制的矩形的高度；context.font：定义绘制文本的字号 和 字体；context.textBaseLine:定义文本的对齐的基准线，取值有top,bottom,middle,hanging,ideographic； context.fillText(text, x, y):定义要绘制的文本，text是要绘制的文本内容,x是文本放置的x坐标,y是文本放置的y坐标。