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