ここに質問したいことを詳細に書いてください
エリアを2つに分けたとして、片方のエリア(アイテム)に設置したある画像をクリックするともう片方のエリア(canvas)に少し大きなサイズの同じ画像を描画しようと考えています。
画像の数が増えた場合の事を考えて、配列や関数を使い同じ処理を行わないようにしたいと思っています。
###発生している問題・エラーメッセージ
エラーは特に起こっていません。
###該当のソースコード
<div id="container"> <!--canvasエリア --> <canvas id="canvas"></canvas> <!--アイテム --> <div id="item"> <img class="imgs" id="img01" src="xxx/thum/01.jpg" alt="サムネ01"> <img class="imgs" id="img02" src="xxx/thum/02.jpg" alt="サムネ02"> </div>
スクリプト $(function() { var canvas = $('#canvas')[0]; var context = canvas.getContext("2d"); var imgList = new Array( "xxx/01.jpg", "xxx/02.jpg" ); $('.imgs').each(function() { var img = $(this); img.click = targetImage; }) function targetImage () { for(var i=0; i<imgList.length; i++) { context.drawImage(imgList[i], 10, 10); } } }
###試したこと
片方のエリア(アイテム)にある画像それぞれにクリックイベントを指定すればcavasに描画する事までは出来ました。
var item = $('#item'); var img01 = item.find('#img01'); var image = new Image(); image.src = "xxx/01.jpg"; img01.click(function() { context.drawImage(image, 10, 10); })
###補足情報(言語/FW/ツール等のバージョンなど)
配列への変換がおかしいのか、関数化に失敗しているのか原因が突き止められず非常に悔しいです。
お力をお貸し下さい。宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー