• 締切済み

canvas上で画像を移動する方法について

javascript超初心者です。 canvas上でimage1.pngをドラッグして移動させるために、次のようなコードを書きました。 window.addEventListener("load", function() { var canvas = document.getElementById("dCanvas"); var ctx=canvas.getContext("2d"); var image = new Image(); image.src="./images/image1.png"; var imageDrag = false; var imageObject = { x:0, y:0, width:100, height:50, }; image.onload = function () { ctx.drawImage(image,imageObject.x, imageObject.y); } canvas.addEventListener("mousemove", function(e){ //マウスの移動 var x = e.clientX; var y = e.clientY; if (imageDrag) { ctx.clearRect(0,0,800,400); ctx.drawImage(image, imageObject.x + x - startX, imageObject.y + y - startY); } }); canvas.addEventListener("mouseup",function(e){ if(imageDrag){ //ドラッグを終えたときのマウスの座標 var x = e.clientX; var y = e.clientY; imageObject.x += x-startX; imageObject.y += y-startY; imageDrag = false; } }); canvas.addEventListener("mousedown",function(e){ var x = e.clientX; var y = e.clientY; if(x > imageObject.x && x < imageObject.x+imageObject.width && y > imageObject.y && y < imageObject.y+imageObject.height){ imageDrag = true; //ドラッグを始めたときのマウスの座標 startX = x; startY = y; } }); canvas.addEventListener("mouseleave",function(){ imageDrag = false; }); var startX = -1; var startY = -1; }, true); パソコンでは作動したのですが、タブレット(Galaxy tab)上の Firefoxではタッチ動作で動きません。 パソコン、タブレット両対応にするには、どうすればよいでしょうか。 よろしくご教授下さい。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

タブレットは知らないのですが、イベントの種類が違うのでは?  http://kudox.jp/java-script/javascript-touch-event

hiderin2jp
質問者

お礼

早々にご回答下さりありがとうございました。 mousedownの代わりにtouchstart,mousemoveの代わりにtouchmove,mouseupの代わりにtouchendと入力してみたのですがやはりだめでした。ソースをどのように変えればよいのか教えていただけるととてもありがたいです。 よろしくお願いいたします。