Introduction

Welcome back to my article :)!
Let’s have a break of discussing about Node.js. Now, I want to give example about HTML5, and we will use it again for next article about Node.js.
 

Sources

In this article, the resources of face images are taken from here. Thanks to deleket from Devianart! 🙂

Create an HTML file, then insert this following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Avatar Editor</title>
<script type="text/javascript">
	<!-- Javascript Code -->
</script>
</head>

<body style="font-family: Tahoma;">
	<div style="float: left; width: 350px;">
        <h4 style="margin: 0 0 10px 0;">Select Head</h4>
        <div style="width: 150px; float: left; border: 1px solid #000; text-align: center;">
            <canvas id="theCanvasHead" width="100" height="100" style="margin: auto;">
                <p>Your browser doesn't support canvas.</p>
            </canvas>
            <div>
                <input type="button" value="<" onclick="headPrev()" />
                <input type="button" value="Set" onclick="setHead()" />
                <input type="button" value=">" onclick="headNext()" />
            </div>
        </div>
        <div style="width: 200px; float: left;">
            
        </div>
        <div style="clear: both; height: 20px;"></div>
        <h4 style="margin: 0 0 10px 0;">Select Car</h4>
        <div style="width: 300px; float: left; border: 1px solid #000; text-align: center;">
            <canvas id="theCanvasCar" width="300" height="200">
                <p>Your browser doesn't support canvas.</p>
            </canvas>
            <div>
                <input type="button" value="<" onclick="carPrev()" />
                <input type="button" value="Set" onclick="setCar()" />
                <input type="button" value=">" onclick="carNext()" />
            </div>
        </div>
        <div style="width: 200px; float: left;">
            
        </div>
        <div style="clear: both;"></div>
   	</div>
    
    <div style="float: left;">
    	<h4 style="margin: 0 0 10px 0;">Preview</h4>
        <div style="width: 300px; border: 1px solid #000; text-align: center;">
        	<canvas id="theCanvasPreview" width="300" height="300">
            	<p>Your browser doesn't support canvas.</p>
            </canvas>
            <div>
            	<input type="button" value="Save" onclick="saveData()" />
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</body>
</html>

 
This HTML code provides three HTML5 canvas. The first canvas will be used to contain face images, the second canvas will be used to contain car images, and the third canvas will be used to contain the preview of the face and the image choosen.

Under the Javascript code, put this following code:

var key = 'avatarDataRZ';

	var maxHead = 15;
	var maxCar = 4;

	var head = 1;
	var car = 1;
	var sHead = 1;
	var sCar = 1;
	
	window.onload = function() {
		drawImage('theCanvasHead', 'faces/', head, 0, 0, 100, 100);
		drawImage('theCanvasCar', 'cars/', car, 0, 0, 300, 200);
		
		var saved = localStorage.getItem(key);
		var data = eval('(' + saved + ')');
		if(saved != null) {
			sHead = data.face;
			sCar = data.car;
		}
		
		setInterval(refreshPreview, 300 / fps);
	}
	
	function drawImage(cvs, pre, idx, dx, dy, sx, sy) {
		var canvas = document.getElementById(cvs);
		if(canvas.getContext) {
			canvas.width = canvas.width;
			var context = canvas.getContext('2d');
			var img = new Image();
			img.src = "source/" + pre + idx + ".png";
			img.onload = function(e) {
				context.drawImage(img, dx, dy, sx, sy);
			};
		}
	}
	
	function headNext() {
		head = (head % maxHead) + 1;
		drawImage('theCanvasHead', 'faces/', head, 0, 0, 100, 100);
	}
	
	function headPrev() {
		head--;
		if(head==0) head = maxHead;
		drawImage('theCanvasHead', 'faces/', head, 0, 0, 100, 100);
	}
	
	function setHead() {
		sHead = head;
		refreshPreview();
	}
	
	function carNext() {
		car = (car % maxCar) + 1;
		drawImage('theCanvasCar', 'cars/', car, 0, 0, 300, 200);
	}
	
	function carPrev() {
		car--;
		if(car==0) car = maxCar;
		drawImage('theCanvasCar', 'cars/', car, 0, 0, 300, 200);
	}
	
	function setCar() {
		sCar = car;
		refreshPreview();
	}
	
	function refreshPreview() {
		var canvas = document.getElementById('theCanvasPreview');
		if(canvas.getContext) {
			canvas.width = canvas.width;
			var context = canvas.getContext('2d');
			var imgCar = new Image();
			imgCar.src = "source/cars/" + sCar + ".png";
			//imgCar.onload = function(e) {
				context.drawImage(imgCar, 0, 80 - aniAmt, 300, 200);
				var imgHead = new Image();
				imgHead.src = "source/faces/" + sHead + ".png";
			//	imgHead.onload = function(e) {
					context.drawImage(imgHead, 120, 100, 100, 100);
			//	}
			//}
		}
	}
	
	//animation
	var aniInc = 0.1;
	var aniDir = 1;
	var aniAmt = 0;
	var aniMax = 2;
	var fps = 30;
	var aniInterval = setInterval(updateAni, 300 / fps);
	
	function updateAni() {
		if(aniDir === 1) {
			aniAmt -= aniInc;
			if(aniAmt < -aniMax) {
				aniDir = -1;
			}
		}
		else {
			aniAmt += aniInc;
			if(aniAmt > aniMax) {
				aniDir = 1;
			}
		}
	}
	
	function saveData() {
		localStorage.setItem(key, '{ "face": ' + sHead + ', "car": ' + sCar + ' }');
		alert("Your data has been saved!");
	}

 

Code Explanation

When the browser load the page, the code will load the data saved from webstorage, the data will be set to the current variables and the preview will be shown.
The updateAni() function is created to make animation of the car. It will move up and down.
 

You can download the full example here.