今日の課題：Canvasで画像ファイルを描く
<!DOCTYPE html>
<html>
<head>
<title>HTML5の練習＠ヒッキープログラミングスレ</title>
<style type="text/css">
body { background-color: silver; }
canvas { background-color: white; }
</style>
</head>
<body>
<h4>画像ファイルを描く</h4>
<canvas id="mycanvas" width="640" height="480"></canvas>
<script language="javascript" type="text/javascript">
function mydraw() {
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 10, 10);
ctx.drawImage(img, 100, 10, img.width * 2, img.height * 2);
var w = img.width / 2;
var h = img.height / 2;
ctx.drawImage(img, w / 2, h / 2, w, h, w * 8, 10, w * 4, h * 4);
}
img.src = 'http://0.gravatar.com/avatar/b57970073a83378331824d286bd00fb8';
}
mydraw();
</script>
</body>
</html>
- 画像ファイルはImageオブジェクトを使ってロードしてdrawImage()で描写する
- Imageオブジェクトのsrcに画像ファイルのパス(URL)を指定するとロードが開始する
- Imageオブジェクトのonloadに処理を指定しておいて、画像のロード完了直後に画像を描写できるようにする
- Imageオブジェクトのwidth,heightで幅、高さを取得できる（もちろん画像ロード後）
- drawImage(img,x,y) (x,y)の位置を左上とし画像を描写する
- drawImage(img,x,y,w,h) (x,y)の位置を左上としサイズ(w,h)に拡大・縮小して描写する
- drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) 画像ファイルの(sx,sy)の位置からサイズ(sw,sh)だけ切り取って、Canvasの(dx,dy)の位置を左上としサイズ(dw,dh)に拡大・縮小して描写する
最終更新：2016年05月12日 05:39
