A very simple Canvas and JQuery application

13,11,2010 at 20:42 Yorum bırakın

<![CDATA[My first canvas-jquery sample. Hope to create a simple html5 game and publish soon.

/lib/canvas_gallery/

<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);
	})
}

]]>

Reklamlar

Entry filed under: Canvas, Cool Stuff, Html5, Jquery, Personal. Tags: , .

HTML/CSS/JS – Best Practices and Optimization Techniques Build a Practical Pure CSS3 Button

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Takvim

Kasım 2010
P S Ç P C C P
« Eki   Ara »
1234567
891011121314
15161718192021
22232425262728
2930  

Most Recent Posts


%d blogcu bunu beğendi: