html5-learning-002-canvas(1)

来源：互联网发布：淘宝刷多少单才有生意编辑：程序博客网时间：2024/06/08 01:14

canvas

Transformation matrix

Methods for scale,rotate,transform,and translate

Clipping region

Create with the clip() method

Properties of the context

Properties include strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line
Join, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, global
CompositeOperation, font, textAlign, and textBaseline

eg1:guess the letter game

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Guess The Letter Game</title><script src="modernizr-1.6.min.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 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 = [];gameOver = false;window.addEventListener("keyup",eventKeyPressed,true);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);Debugger.log(guessIndex);if(guessIndex < 0) {higherOrLower = "That is not a letter";} else if(guessIndex > letterIndex) {higherOrLower = "Lower";} else {higherOrLower = "Higher";}}drawScreen();}}function drawScreen() {//Backgroundcontext.fillStyle = "#ffffaa";context.fillRect(0, 0, 500, 300);//Boxcontext.strokeStyle = "#000000"context.strokeRect(5, 5, 490, 290);context.textBaseline = "top";//Datecontext.fillStyle = "#000000";context.font = "10px _san";context.fillText(today, 150, 10);//Messagecontext.fillStyle = "#FF00000";context.font = "14px _sans";context.fillText(message, 125, 30);//Guessescontext.fillStyle    = "#109910";context.font         = "16px _sans";context.fillText  ('Guesses: ' + guesses, 215, 50);//Higher Or Lowercontext.fillStyle    = "#000000";context.font         = "16px _sans";context.fillText  ("Higher Or Lower: " + higherOrLower, 150,125);//Letters Guessedcontext.fillStyle    = "#FF0000";context.font         = "16px _sans";context.fillText  ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);if (gameOver) {context.fillStyle    = "#FF0000";context.font         = "40px _sans";context.fillText  ( "You Got it!", 150, 180);}}function createImageDataPressed(e) {window.open(theCanvas.toDataURL(), "canvasImage", "left=0, top=0,width=" +theCanvas.width + ",height" + theCanvas.height + "toolbar=0, resizable=0");}}</script></head><body><div style="position: absolute; top: 50px; left: 50px;"><canvas id="canvasOne" width="500" height="300">Your brower does not support HTML5 Canvas.</canvas><form><input type="button" id="createImageData" value="Export Canvas Image" /></form></div></body></html>