Canvas入门范例01：猜字母 _Web前端

Canvas入门实例01：猜字母

本文通过一个猜字母游戏示例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()方法，可以获得当前渲染的画板的位图文件。