• 締切済み

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と入力してみたのですがやはりだめでした。ソースをどのように変えればよいのか教えていただけるととてもありがたいです。 よろしくお願いいたします。

関連するQ&A

  • javascriptのcanvasについて

    先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま(この記述でいうと茶色や赤)で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [  'hair1.png',  'hair2.png',  'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>

  • javascriptの条件文

    スマホにタッチした時の値を取得するスクリプトです。 よくわからないまま作成してますが、ご勘弁下さい。 <script type="text/javascript"> window.document.addEventListener("touchstart", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchmove", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchend", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = ""; }, true); ここまでは正常。 値を取得した、Yを下記のようにしたのですが、 500以上になってもロケーションが実行されません。 間違いなく構文が間違っているのですが、数時間格闘したのですが、わからないので すみませんが、教えて頂けると有難いです。 num = event.touches[0].clientY; if (num >= "500") { location.href = "https://www.google.co.jp/"; } </script>

  • 複数選択した画像のキャンバスへの描画につい

    HTML5のタグを <input type="file" id="fileInput" multiple /> として、 ファイル選択のonchageイベントで、 選択した画像をキャンバスに50pxずつずらして描画しようとしたところ、 選択ファイルが2つまでなら、うまく描画されますが、4つになると、何故か最後の 画像ファイルしか描画されません(1~3番目に選択した画像ファイルは描画されない)。 選択した画像ファイルをすべて表示するにはどうしたらいいのか教えてください。 宜しくお願いします。 コードは次のとおりです。 document.getElementById('fileInput').onchange = function() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); var drwX = 0, drwY = 0;//描画初期位置 var files = this.files; // 選択されたファイルを取得 for (var i = 0; i < files.length; ++i) { var file = this.files[i]; // 画像ファイル以外は処理中止 if (!file.type.match(/^image\/(png|jpeg|gif)$/)) continue; var image = new Image(); var reader = new FileReader(); reader.onload = function(evt) { image.onload = function() { ctx.drawImage(image, drwX, drwY, 50, 50); }; drwX += 50;//次の画像の描画位置を右へ50px drwY += 50;//              下へ50px // 画像のソースに、ファイルのURLを設定 image.src = evt.target.result; } // 読み込んだデータをBase64でエンコードしURLへ reader.readAsDataURL(file); } }

  • FireFoxでブラウザーと閉じる時に特定の処理を実行したいのですが良い方法を教えてください。

    ブラウザーを閉じる時に特定の処理をWebページ内で実行したのですが、FireFoxでは可能でしょうか? IEでは、下記のロジックで対応することが出来ました。 window.onunload=function() { var x=window.event.clientX,y=window.event.clientY; var w=document.body.clientHeight; if (y<0 &(w-5)<x || x<15) { alert('IEを閉じます。'); } }

  • javascriptエラーの解決策について

    かなりの初心者で他のサイトのソースを借りて改変しています。 どうしても「オブジェクトでサポートされていないプロパティまたはメソッドです」というエラーが消えません。 出来れば具体的な対応策をご教授いただけましたら幸いです。 var startX; var moveX; var diffX = 0; var link_value=''; var adstartY; var admoveY; $(function() { var box = $("#menu-ul")[0]; var touchHandler = getTouchHandler(); box.addEventListener("tmove", touchHandler, false); box.addEventListener("tcst", touchHandler, false); box.addEventListener("tchend", touchHandler, false); document.addEventListener("tmove", getTouchHandlerdoc(), false); document.addEventListener("tcst",getTouchHandlerdoc(), false); document.addEventListener("tchend", getTouchHandlerdoc(), false); $("#item0")[0].addEventListener("tcst", getTouchHandlera('0'), false); $("#item1")[0].addEventListener("tcst", getTouchHandlera('1'), false); $("#item2")[0].addEventListener("tcst", getTouchHandlera('2'), false); $("#item3")[0].addEventListener("tcst", getTouchHandlera('3'), false); $("#item4")[0].addEventListener("tcst", getTouchHandlera('4'), false); $("#item5")[0].addEventListener("tcst", getTouchHandlera('5'), false); $("#item6")[0].addEventListener("tcst", getTouchHandlera('6'), false); /* $("#item9")[0].addEventListener("tcst", getTouchHandlera('9'), false); */ $("#menu-prev-btn")[0].addEventListener("tcst", getTouchHandlerb('prev'), false); $("#menu-next-btn")[0].addEventListener("tcst", getTouchHandlerb('next'), false); $("#menu-prev-btn")[0].addEventListener("tchend", getTouchHandlerb('prev'), false); $("#menu-next-btn")[0].addEventListener("tchend", getTouchHandlerb('next'), false); }); function getTouchHandlerdoc() { return function(e) { if (e.type == "tcst") { $('#footer_ad').hide(); $('#footer_ad').stop(); adstartY = touch.pageY; } else if (e.type == "tmove") { admoveY = touch.pageY - adstartY; if ((admoveY < 20) && (admoveY > -20)){ $('#footer_ad').css('position','absolute'); $('#footer_ad').css('top',document.body.clientHeight + 'px'); } } else if (e.type == "tchend") { $('#footer_ad').show(); } }} function getTouchHandlerb(param) { return function(e) { e.preventDefault(); if (e.type == "tcst") { link_value = param; if(param == "prev"){ timer_prev(); }else if(link_value == "next"){ timer_next(); } } else if (e.type == "tchend") { } }} function getTouchHandlera(param) { return function(e) { //e.preventDefault(); if (e.type == "tcst") { link_value = $('#item'+param+' a').attr('href'); } }} function getTouchHandler() { var sTime = 0; var moveX = 0; return function(e) { //e.preventDefault(); var touch = e.touches[0]; if (e.type == "tcst") { startX = touch.pageX; moveX = 0; startX = startX - diffX; sTime = (new Date()).getTime(); } else if (e.type == "tmove") { //e.preventDefault(); diffX = touch.pageX - startX; moveX = diffX; if (diffX > 0){ diffX = 0; } if (diffX < -320){ diffX = -320; } $("#menu-ul").css("left", diffX + "px"); //$("#menu-ul").animate({left:diffX + 'px'},10); } else if (e.type == "tchend") { //e.preventDefault(); var t = (new Date()).getTime() - sTime; if ((moveX < 10) && (moveX > -10)){ location.href=link_value; } } } } $(window).scroll(function () { var win = window.innerHeight; var offsettop = $("#page").offset().top; var offsettop = window.pageYOffset; var adposition = offsettop + win - 50; var adstartposition = offsettop + win + 60; $('#footer_ad').css('position','absolute'); $('#footer_ad').css('top',adstartposition); $("#footer_ad").animate({top:adposition + 'px'},500) }); window.onorientationchange = function() { var win_width = $(window).width(); $('#menu-frame').css('width',(win_width - 54) + 'px'); $('#menu-frame').css('overflow','hidden'); } $(document).ready(function () { var win_width = $(window).width(); $('#menu-frame').css('width'

  • 画面をドラッグ

    ActionScript3.0で画面をドラッグして移動させるflashを作っています。 マウスを離してからも少しだけ動くように*2.75しています。 しかしhoge_mcが画面外に出た時にif文やflagを使って止めようとすると進む力が残っているっぽくて確実に止まってくれません。 どなたかこの問題の解決法が分かる方いませんか? *ソースです。(ステージにhoge_mcを置けば動きます。) import caurina.transitions.Tweener; var startX:Number = 0; var cameraRange:Number = 0; var tweenNum:Boolean =false; this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown); this.stage.addEventListener(MouseEvent.MOUSE_UP, onUp); function onDown(event:MouseEvent):void { tweenNum = false; this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove,false); startX = event.stageX; this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove,false); } function onUp(event:MouseEvent):void { this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove,false); } function onMove(event:MouseEvent):void { trace(hoge_mc.x); if(tweenNum == true){ Tweener.removeTweens(hoge_mc); return; } var cameraIkata = event.stageX - startX; hoge_mc.x += cameraIkata; cameraRange = cameraRange + cameraIkata; Tweener.addTween(hoge_mc, {x:cameraRange*2.75, time:3, transition:"easeOut"}); startX = event.stageX; } stage.addEventListener(Event.ENTER_FRAME,loop); function loop(e:Event):void { if (hoge_mc.x > 401) { tweenNum = true; Tweener.removeTweens(hoge_mc); hoge_mc.x = 400.5; } if (hoge_mc.x < 0) { tweenNum = true; Tweener.removeTweens(hoge_mc); hoge_mc.x = 0.5; } }

  • javascriptで困ってます

    下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>

  • JavaScript/CANVASでの画像読込不可

    JavaScriptで、Canvas上で、透過GIFファイルを表示しようとしています。 (JSでは2週間ほど勉強しておる初心者です。皆様のアドバイス賜りたくよろしくおねがいします。) オリジナルのPictureクラスを以下のように宣言し、 --------------------------------------------- // pictureクラス var Picture = function(ctx, picture, locX, locY, width, height, canvas){ this.ctx = ctx; this.picture = picture; this.locX = locX; this.locY = locY; this.width = width; this.height = height; this.canvas = canvas; var img = new Image(); this.img = img; this.img.src = this.picture; } Picture.prototype.drawPicture = function(){ this.img.onload = function(){ ★ this.ctx.drawImage(this.img, this.locX, this.locY, this.width, this.height); } } ---------------------------------------------------------- 以下のように使用しても、 ------------------------------------------ var Container1 = new Picture(mainctx, "画像ファイル.gif", 42, 80, 100, 50, maincanvas); Container1.drawPicture(); ------------------------------------------ 以下のエラーがでます。(Firefox上で確認) ---------------------- TypeError: this.ctx is undefined (エラー行は★の書いている行) ---------------------- ちなみに、drawPicture関数を ---------------------- Picture.prototype.drawPicture = function(){ this.ctx.drawImage(this.img, this.locX, this.locY, this.width, this.height); } ---------------------- と変更すれば、エラーはなくなりますが、 画像は出るときと出ないときがあります。何度か再読込すれば表示されます。 きっと thisの使い方が間違っている(=理解していない)のではないかと 思うのですが、いかがでしょうか? すみませんが、うまく動く方法をご教示頂ければうれしいです。よろしくおねがいします。 以上

  • javascriptKeydownのcanvas

    こんにちは。 javascriptのkeydownについての質問です。 <script type="text/javascript"> document.onkeydown = draw; function draw() { var hiddenI = document.getElementById("i"); var hiddenJ = document.getElementById("j"); i = hiddenI.value; j = hiddenJ.value; var canvas = document.getElementById('rolate'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); //下ボタン if(event.keyCode == 40){ i = i; j += 1; ctx.lineTo(i, j); ctx.closePath(); ctx.stroke(); } //右ボタン else if(event.keyCode == 39){ i += 1 ; j = j; ctx.lineTo(i, j); ctx.closePath(); ctx.stroke(); } hiddenI.value = i; hiddenJ.value = j; } </script> <body> <h1>Canvas</h1> <canvas id="rolate" width="600" height="600" style="background:#ffffff;"></canvas> <input type="hidden" value="5" id="i"> <input type="hidden" value="5" id="j"> </body> </html> このコードで下ボタンと右ボタンが押されたとき、 決まった5ピクセルずつdrawしようと書きましたが、 キーを押すたびに、値が倍増されます。 どうすれば、5ピクセルずつ値を増やせるのでしょうか。 間違いがある箇所があれば、ご教授お願いします。 よろしくお願いします。

  • javascriptのタイプミス

    javascript初心者です。以下のコードでどこにミスがあるのか 解りません。どこにあるのでしょうか? このソースをエディタに 貼ると見やすくなると思います。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W, H, S = 20; var snake = [ ], foods = [ ]; var keyCode = 0; var point = 0; var timer = NaN; var ctx; // pointオブジェクト function Point(x,y) { this.x = x; this.y = y; } //初期関数 function init() { var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; //蚊の初期化 snake.push(new Point(W / 2, H / 2)); //餌の初期化 for (var i = 0 ; i < 10 ; i++) { addFood(); } timer = setInterval("tick()", 200); window.onkeydown = keydown; } //餌の追加 function addFood() { while (true) { var x = Math.floor(Math.random() * W); var y = Math.floor(Math.random() * H); if (isHit(foods, x, y) || isHit(snake, x, y)) { continue; } foods.push(new Point(x, y)); break; } } //衝突判定 function isHit(data, x, y) { for (var i = 0 ; i < data.length ; i++) { if (data[i].x==x && data[i].y==Y) { return true; } } return false; } function moveFood(x, y) { foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood(); } function tick() { var x = snake[0].x; var y = snake[0].y; switch (keyCode) { case 37: x--; break; //左 case 38: y--; break; //上 case 39: x++; break; //右 case 40: y++; break; //下 default: paint(); return; } //自分or壁に衝突 if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H ) clearInterval(timer); paint(); return; } //頭を先頭に追加 snake.unshift(new Point(x,y)); if(isHit(foods, x, y)) { point +=10; //餌を食べた moveFood(x,y); }else{ snake.pop(); //食べていない→しっぽを解除 } paint(); } function paint() { ctx.clearRect(0,0,W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S, S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function (p) { ctx.fillText("+", p.x * S, (p.y + 1) * S);}); snake.forEach(function (p) { ctx.fillText("*", p.x * S, (p.y + 1) * S); }); } function keydown(event) { keyCode = event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

専門家に質問してみよう