html5 image表示

html5で画像イメージを表示する方法を紹介します。

このサンプルではイメージリソースをロードしたら表示するようにするサンプルです。

サンプル：
http://html5next.appspot.com/image1.html

ソース：
<script type="text/javascript">
// Load the gnu image
var objImage = new Image();
objImage.src = "gnu.jpg";

// Once the image is loaded, draw on the canvas
objImage.onload = function () {
 formload();
}

function formload()
{
 try
 {
  var objCanvas = document.getElementById("cvs01");
  var context = objCanvas.getContext("2d");

        // Draw the objImage pattern image where
        //  the filled rectangle was before
        context.drawImage(objImage, 10, 10, 112, 109);
        context.drawImage(objImage, 130, 10, 112, 109);
        context.drawImage(objImage, 10, 130, 112, 109);
 }
 catch(e)
 {
  alert(e.description);
 }
}
</script>