html5-learning-002-canvas(1)

最新推荐文章于 2024-09-28 22:57:04 发布

tdoly

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量448

点赞数

分类专栏： html5 文章标签： html5 function exception include button image

本文链接：https://blog.csdn.net/tdoly/article/details/7834654

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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() {
				//Background
				context.fillStyle = "#ffffaa";
				context.fillRect(0, 0, 500, 300);
				//Box
				context.strokeStyle = "#000000"
				context.strokeRect(5, 5, 490, 290);
				context.textBaseline = "top";
				//Date
				context.fillStyle = "#000000";
				context.font = "10px _san";
				context.fillText(today, 150, 10);
				//Message
				context.fillStyle = "#FF00000";
				context.font = "14px _sans";
				context.fillText(message, 125, 30);
				//Guesses
				context.fillStyle    = "#109910";
				context.font         = "16px _sans";
				context.fillText  ('Guesses: ' + guesses, 215, 50);
				//Higher Or Lower
				context.fillStyle    = "#000000";
				context.font         = "16px _sans";
				context.fillText  ("Higher Or Lower: " + higherOrLower, 150,125);
				//Letters Guessed
				context.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>