HTML5 canvas之基础篇（一）

一.检测浏览器是否支持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坐标。