Canvasでビットマップ画像 | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:09 JST hig"

ビットマップ画像

サンプル1

サンプル1

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Canvasのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
  window.onload = function (){
     var c=document.querySelector('#canvas-id1');
     paintCanvas(c); // defined in external JavaScript file
  }
</script>


</head>
<body>
  <h1>Canvasのテスト</h1>
  <canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>

paintcanvas.js


function paintCanvas(c){
    var ct=c.getContext('2d'); 

    var cat=new Image();
    cat.src="GUM15_SY02055.jpg"; // 同じディレクトリに置かれた画像ファイル名


    cat.onload = paint;
    cat.addEventListener('load',paint(),false); // これでもいい気がしたんだけどだめ? ブラウザ依存か?

    function paint(){
//	ct.drawImage(image,dx,dy);
	ct.drawImage(cat,200,200);

//	ct.drawImage(image,dx,dy,dw,dh);
	ct.drawImage(cat,100,100,90,90);

//	ct.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
	ct.drawImage(cat,90,100,60,50,0,0,120,100);
	ct.drawImage(cat,90,170,60,50,0,110,60,50);
    }
}

画像ファイルGUM15_SY02055.jpg

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net