end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

canvasタグに画像データを表示

http://www.html5.jp/canvas/how6.html
http://thinkit.co.jp/article/60/4

↑このurlの写経ですが、画像のプリロードや、ブラウザのcache対策等、初めて知った内容ばかりでした。

html

<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css">
<script type="text/javascript" src="common.js"></script>
</head>
<body>

<canvas id="c1"></canvas>

</body>
</html>

javascript

onload = function() {
  draw();
};

function draw() {
    var canvas = document.getElementById('c1');
    if ( ! canvas || ! canvas.getContext ) { return false; }
    var ctx = canvas.getContext('2d');
    var img = new Image();      //Image obj作成

    //ブラウザのcache対策 
    img.src = "sample.jpg?" + new Date().getTime();

    // 画像読込みを待って、処理続行 
    img.onload = function() {
        //refer to http://www.html5.jp/canvas/how6.html
        ctx.drawImage(img, 20, 30, 200, 100);
    };
}

css

canvas {
    border: 1px solid #000000;
    width: 100px;
    height: 100px;
}