事前に400×400ピクセルのimage.jpgを準備
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<title>キャンバスに画像を表示する</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 50px;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
main.js
// main.js
let canvas = null; // キャンバス
let g = null; // コンテキスト
/*
* 起動時の処理
*/
window.addEventListener("load", function(){
// キャンバス情報取得
canvas = document.getElementById("canvas");
g = canvas.getContext("2d");
// キャンバス塗りつぶし
g.fillStyle = "#be3455";
g.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);
// キャンバスに画像を描画する
const image = new Image();
image.src = "image.jpg";
// 画像読み込み後にキャンバスに表示
image.addEventListener("load", (e)=>{
g.drawImage(e.target, 0, 0, 400, 400, 50, 50, 400, 400);
});
/*
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
@image: 画像情報
@sx, sy: 元画像の切り取り開始位置
@sw, sh: 元画像の切り取り幅と高さ
@dx, dy: 描画開始位置
@dw, dh: 描画幅と高さ
*/
});
コメント