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>
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); }; }
canvas { border: 1px solid #000000; width: 100px; height: 100px; }