みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascriptのcanvasについて

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>

投稿日時 - 2015-03-18 16:44:03

QNo.8938272

困ってます

質問者が選んだベストアンサー

document.getElementById("selfile").onchange=function(){
var r=new FileReader();
r.onload=function(e){
Img.src=e.target.result;
Img.onload=function(){
ConMode.drawImage(this,-ImgWidth/2,-ImgHeight/2,ImgWidth,ImgHeight);
}
}
r.readAsDataURL(this.files[0]);
};

とりあえず選択したローカルファイルをキャンバスに描画するコード
これでやりたいことの具材はそろうはず

上下左右の移動については今書いてるコードで
やってることの範囲でできるだろうからあんまり言いません

ただ、拡大縮小も移動も、画像一枚の表示しかしないcanvasでなら
translate()とscale()でやったほうがスマートだろうなとは思います

全面クリアが面倒にはなりますが

投稿日時 - 2015-03-24 07:47:20

お礼

H240S18B73 様

お礼のご連絡が遅くなり申し訳ございませんでした。
大変貴重なアドバイスをありがとうございます。
頂いたアドバイスをもとに希望のものが出来るよう引き続き勉強してみます。ありがとうございました。

投稿日時 - 2015-03-25 11:45:08

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問