HTML5のcanvasを勉強しています。
canvas内にローカル画像を表示させ（サーバにアップロードはしないで）、
その画像の拡大や縮小、上下左右の移動などの操作が出来るようなものにしたいと考えているのですが、なかなかうまく出来ません。
先日もjavascriptでの画像の拡大縮小などについて質問させて頂いたのですが
どうしてもうまく出来ずにいます。
サンプルや見本を探しながら下記のような記述になったのですが、
希望としているローカル画像を表示し拡大縮小することや、
左右上下に動かすことの記述がわからずにいます。
解決方法など教えて頂けましたら幸いです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
var rectWidth = 100;
var rectHeight = 500;
var theta = 10;
var MyCanvas;
var ConMode;
var RotateState = 0;
var Img = document.createElement('img');
Img.src = "http://sites.google.com/site/westinthefareast/home/datafiles/Desert.jpg";
var ImgWidth = 204.8;
var ImgHeight = 153.6;
//キャンバスがロードされてから初期処理を行う
onload = function() {
//キャンバスオブジェクトへの参照をセット
MyCanvas = document.getElementById("DrawField");
//キャンバスの大きさを400px×400pxにする
MyCanvas.setAttribute('width', '400');
MyCanvas.setAttribute('height', '400');
//2次元描画用コンテキストを設定
ConMode = MyCanvas.getContext('2d');
//キャンバスの座標系を0,0（左上）からキャンバスの中心に移動する
ConMode.translate(MyCanvas.width/2,MyCanvas.height/2);
//読み込んだ画像イメージを指定のサイズでキャンバスの中心に表示する
ConMode.drawImage(Img,-ImgWidth/2,-ImgHeight/2,ImgWidth,ImgHeight);
};
//画像を縮小表示する処理
function ShrinkView(){
//表示された画像を消す
ConMode.clearRect(-ImgWidth/2-10,-ImgHeight/2-10,ImgWidth+20,ImgHeight+20);
//画像の大きさを0.833倍にする
ImgWidth = ImgWidth/1.2;
ImgHeight = ImgHeight/1.2;
//画像の重心がキャンバス座標の中心点にくるように画像を表示する
ConMode.drawImage(Img,-ImgWidth/2,-ImgHeight/2,ImgWidth,ImgHeight);
}
//画像を拡大表示する処理
function ExpandView(){
//表示された画像を消す
ConMode.clearRect(-ImgWidth/2-10,-ImgHeight/2-10,ImgWidth+20,ImgHeight+20);
//画像の大きさを1.2倍にする
ImgWidth = ImgWidth*1.2;
ImgHeight = ImgHeight*1.2;
ConMode.drawImage(Img,-ImgWidth/2,-ImgHeight/2,ImgWidth,ImgHeight);
}
</script>
</head>
<body>
<input type="file" id="selfile"><br><br>
<form>
<canvas id="DrawField" style="border:solid"></canvas>
<input id= "Shrink" type=button value="縮小" onClick="ShrinkView()">
<input id= "Expand" type=button value="拡大" onClick="ExpandView()">
<input id= "Right" type=button value="右" onClick="right()">
<input id= "Left" type=button value="左" onClick="right()">
<input id= "Up" type=button value="上" onClick="up()">
<input id= "Down" type=button value="下" onClick="down()">
</form>
</body>
</html>
お礼
H240S18B73 様 お礼のご連絡が遅くなり申し訳ございませんでした。 大変貴重なアドバイスをありがとうございます。 頂いたアドバイスをもとに希望のものが出来るよう引き続き勉強してみます。ありがとうございました。