スタートページ＞ Javascript＞ 画像＞ ＣＡＮＶＡＳ
drawImageZPR(canvas名, 画像名, 画像左上x,画像左上y, {オプション});
canvas名 // HTMLでサイズも定義
画像名
画像左上x,画像左上y // 画像の左上端（位置調整で変更）が CANVAS に表示する位置
オプションと省略値
位置調整 : "左上", // 画像のこの位置を、画像左上x,画像左上yに設定する
画像幅 : 0, 画像高 : 0, // 指定すると画像をズームして表示。０のときはズームしない
回転位置 : "左上", // 回転するときの画像の位置
回転角度 : 0 // 度分法で反時計回りで指定。０のとき回転しない。
（位置調整と回転位置 "中央", "左上", "左下", "右上", "右下"）
<canvas id ="画像canvas" width="400" height="300"></canvas>
function drawImageZPR(canvas名, 画像名, 画像左上x,画像左上y,
{
位置調整 = "左上",
画像幅 = 0, 画像高 = 0,
回転位置 = "左上",
回転角度 = 0
}
) {
var canvas = document.getElementById(canvas名);
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'silver';
ctx.fillRect(0,0,canvas.width, canvas.height);
var 画像 = new Image();
画像.onload = function() {
var 元画像幅 = 画像.width;
var 元画像高 = 画像.height;
// ================================ 処理の確認
// ================ ズーム処理の有無
if (画像幅 == 0) { // 画像幅, 画像高を与えないとき
var ズーム処理 = false;
画像幅 = 元画像幅;
画像高 = 元画像高;
}
else {
var ズーム処理 = true;
}
// ================ 位置調整の有無
if (位置調整 == "左上") {
var 位置調整処理 = false;
var 位置調整x = 0; var 位置調整y = 0;
}
else {
位置調整処理 = true;
if (位置調整 == "中央") { 位置調整x = 画像幅/2; 位置調整y = 画像高/2; }
else if (位置調整 == "左下") { 位置調整x = 0; 位置調整y = 画像高; }
else if (位置調整 == "右上") { 位置調整x = 画像幅; 位置調整y = 0; }
else if (位置調整 == "右下") { 位置調整x = 画像幅; 位置調整y = 画像高; }
}
// ================ 回転処理の有無
if (回転角度 == 0) var 回転処理 = false;
else {
回転処理 = true;
var 角度 = -回転角度 * Math.PI/180; // ラジアン、反時計回りに変換
// 回転位置
if (回転位置 == "左上") {var 回転位置x = 0; var 回転位置y = 0; }
else if (回転位置 == "中央") { 回転位置x = 画像幅/2; 回転位置y = 画像高/2; }
else if (回転位置 == "左下") { 回転位置x = 0; 回転位置y = 画像高; }
else if (回転位置 == "右下") { 回転位置x = 画像幅; 回転位置y = 画像高; }
}
// translateやrotateを使う前の標準状態を保存
ctx.save();
// ============================= 画像表示
// ================ ズーム処理後の画像表示
if ( (!位置調整処理) && (!回転処理) ) {
ctx.drawImage(画像, 0,0, 元画像幅, 元画像高, 画像左上x,画像左上y, 画像幅, 画像高);
}
if ( (!位置調整処理) && (!回転処理) ) {
ctx.restore();
return;
}
// ================ 位置調整処理後の画像表示
ctx.translate(画像左上x - 位置調整x, 画像左上y - 位置調整y); // 原点を画像の中心位置に
if (!回転処理) {
ctx.drawImage(画像, 0,0, 画像幅, 画像高);
}
if (!回転処理) {
ctx.restore();
return;
}
// ================ 回転処理後の画像表示
ctx.translate( 回転位置x, 回転位置y ); // 原点を画像の中央にする
ctx.rotate(角度); // 回転中心に３０°時計回りに回転
ctx.translate( -回転位置x, -回転位置y ) ;
ctx.drawImage(画像, 0,0, 画像幅, 画像高);
ctx.restore();
}
画像.src = 画像名;
}