HTML5 canvas之基础篇（一）_H5之家 - 中国HTML5教程资源分享第一站

标签：

一.检测浏览器是否支持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的宽和高，要在标签里定义，因为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></canvas> </body> <script type="text/javascript"> window.addEventListener("load" , eventWindowLoad, false); var Debugger = function() {}; Debugger.log = { 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>

上例用到的知识点：