< BACK TO POST
LinkedIn Facebook Twitter

Blog

A very simple Canvas and JQuery application

November 13th, 2010 | Canvas , Cool Stuff , Html5 , Jquery , Personal

My first canvas-jquery sample. Hope to create a simple html5 game and publish soon.
<html>
	<head>
		<link rel="stylesheet" href="draw.css" />
	</head>
	<body onload="draw()">
		<img id="frame" src="images/picture_frame.png" />
		<ul>
			<li>
				<img src="images/gallery_1.jpg" />
			</li>
			<li>
				<img src="images/gallery_2.jpg" />
			</li>
			<li>
				<img src="images/gallery_3.jpg" />
			</li>
			<li>
				<img src="images/gallery_4.jpg" />
			</li>
			<li>
				<img src="images/gallery_5.jpg" />
			</li>
		</ul>
                <script src="jquery-1.4.4.min.js"></script>
                <script src="draw.js"></script>
	</body>
</html>
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	float: left;
	margin: 0 10px 10px 0;
}

img {
	display: none;
}
function draw(){
	$("li").each(function(){
		$(this).append("<canvas width='100' height='115' />");
		var ctx = $("canvas", this)[0].getContext('2d');
		ctx.drawImage($("img", this)[0], 0, 0);
		ctx.drawImage($("#frame")[0], -3, -3, 108, 124);
	})
}

Leave a Reply