[目次]
Canvasでビットマップ画像 | Webプログラミング!(2021年度)
ビットマップ画像
サンプル1
サンプル1index.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);
}
}参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
