キャンバスにインポートされた画像を移動する

キャンバスに画像を読み込む際に動画に問題があります。このコードを試しましたが、動作しません。コードは画像をキャンバスにドラッグするだけで機能しますが、移動しようとすると移動しません。誰がエラーがどこにあるか教えてください。ここでコードは次のとおりです。キャンバスにインポートされた画像を移動する

<body> 
<section> 

<div> 
<canvas id="canvas" width="300" height="200" style="border:1px solid" > 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 
<input type="button" name="save" value="Drag Image" onClick="drag()"/> 

</div> 

<script type="text/javascript"> 

function drag(){ 
context.fillText("Drop an image onto the canvas", 50, 30); 

var dx = 5; 
var dy = 5; 
var x = 170 
var y = 100; 
var img = new Image(); 
     hasText = true, 
    clearCanvas = function() { 
    if (hasText) {context.clearRect(0, 0, canvas.width, canvas.height); 
    hasText = false; 
           } 
          }; 
     img.addEventListener("load", function() { 
     clearCanvas(); 
    context.drawImage(img, x, y); 
    }, false); 


     // To enable drag and drop 
    canvas.addEventListener("dragover", function (evt) { 
     evt.preventDefault();}, false); 

     // Handle dropped image file - only Firefox and Google Chrome 
     canvas.addEventListener("drop", function (evt) { 
    var files = evt.dataTransfer.files; 
    if (files.length > 0) { 
    var file = files[0]; 
    if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { 
    var reader = new FileReader(); 

    reader.onload = function (evt) { 
    img.src = evt.target.result; 
    }; 
    reader.readAsDataURL(file);} 
    } 
    evt.preventDefault();}, false); 



function doKeyDown(evt){ 
    switch (evt.keyCode) { 
    case 38: /* Up arrow was pressed */ 
     if (y - dy > 0){ 
     y -= dy; 
     } 
     break; 
    case 40: /* Down arrow was pressed */ 
     if (y + dy < c){ 
     y += dy; 
     } 
     break; 
    case 37: /* Left arrow was pressed */ 
     if (x - dx > 0){ 
     x -= dx; 
     } 
     break; 
    case 39: /* Right arrow was pressed */ 
     if (x + dx < canvas.width){ 
     x += dx; 
     } 
     break; 
    } 
} 
function draw(){ 
clearCanvas(); 
context.drawImage(img, x, y);} 

img.addEventListener('keydown',doKeyDown,true); 
} 
</script> 
<script type="text/javascript"> 

canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 
setInterval(draw,5); 

</script> 

</section> 
</body> 
</html>

出典

2011-06-28 Amal

多少の誤差が生じたいくつかの小さな構文エラーがありますFirefoxを使用している場合は、Firefox用のJavaScriptエラーコンソールに建て（Tools -> Error Console）のいずれかを使用してに見てみる試してみてくださいまたはfirebug、またはChromeを使用してコンソール（Tools -> Javascript console）に組み込まれていて、それがスクリプトのデバッグに役立つはずです。キャンバスまたはキャンバスの要素に添付されたイベントがトリガーしないようですが、代わりにイベントリスナーをウィンドウにアタッチするように設定すると、正しく機能するようです。また、ローディングコードはクロームでは機能しないようですが、別の問題として検討する必要があります。

<html> 
<head> 
<title>Test Page</title> 
</head> 
<body> 

<canvas id="canvas" width="300" height="200" style="border:1px solid" > 
    This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 
<input type="button" name="save" value="Drag Image" onClick="drag()"/> 

<script type="text/javascript"> 
var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

function drag(){ 
    context.fillText("Drop an image onto the canvas", 50, 30); 
} 

var dx = 5; 
var dy = 5; 
var x = 170 
var y = 100; 
var img = new Image(); 
hasText = true; 

clearCanvas = function() { 
    if (hasText) { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     hasText = false; 
    } else { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
    } 
}; 

img.addEventListener("load", function() { 
    clearCanvas(); 
    context.drawImage(img, x, y); 
}, false); 

// To enable drag and drop 
canvas.addEventListener("dragover", function (evt) { 
    evt.preventDefault(); 
}, false); 

// Handle dropped image file - only Firefox and Google Chrome 
canvas.addEventListener("drop", function (evt) { 
var files = evt.dataTransfer.files; 
if (files.length > 0) { 
    var file = files[0]; 
    if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { 
     var reader = new FileReader(); 
     reader.onload = function (evt) { 
      img.src = evt.target.result; 
     }; 
     reader.readAsDataURL(file); 
    } 
} 
evt.preventDefault(); 
}, false); 

function doKeyDown(evt){ 
    console.log(evt.keyCode); 
    switch (evt.keyCode) { 
    case 38: /* Up arrow was pressed */ 
     if (y - dy > 0){ 
      y -= dy; 
     } 
     break; 
    case 40: /* Down arrow was pressed */ 
     if (y + dy < canvas.height){ 
      y += dy; 
     } 
     break; 
    case 37: /* Left arrow was pressed */ 
     if (x - dx > 0){ 
      x -= dx; 
     } 
     break; 
    case 39: /* Right arrow was pressed */ 
     if (x + dx < canvas.width){ 
      x += dx; 
     } 
     break; 
    } 
    draw(); 
} 

function draw(){ 
    clearCanvas(); 
    context.drawImage(img, x, y); 
} 

window.addEventListener('keydown', doKeyDown, false); 

//setInterval(draw,5); 
</script> 
</body> 
</html>

出典

2011-06-28 21:53:39 ameer

ありがとうございました。しかし、私はwindow.addEventListenerを試しましたが、動作しません。私は問題が（img）にあると思うが、理由を理解できなかった。 – Amal

投稿したコードをすべて試しましたが、他の構文エラーも修正する必要があります。 – ameer

はいはいそれはthaaaaaaaaaaaaaaaaaaaaaaaaaanx Ameer非常に働いた – Amal

キャンバスにインポートされた画像を移動する

答えて

関連する問題