在 canvas 中移動導入的圖像

Question

將動態圖像導入 canvas 時遇到問題。 我試過這段代碼，但它不起作用。 該代碼只是將圖像拖入 canvas 並且它可以工作，但是當我嘗試移動它時它不會移動。 誰能告訴我錯誤在哪里。 這是代碼：

<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>

Answer 1

有一些小的語法錯誤會導致一些錯誤，如果您使用的是 firefox，您應該嘗試使用 firefox 的內置javascript錯誤控制台或如果您使用內置的錯誤控制台（ Tools -> Error Console ）控制台（ Tools -> Javascript console ），這應該可以幫助您調試腳本。 It seems that keydown events attached to the canvas or canvas elements don't trigger, settings the keydown event listener to attach to the window instead seems to make it function properly. 此外，加載代碼似乎不適用於 chrome，但這將是一個單獨的問題。

<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>

在 canvas 中移動導入的圖像

問題描述

1 個解決方案

解決方案1
1 2011-06-28 21:53:39

在 canvas 中移動導入的圖像

問題描述

1 個解決方案

解決方案1 1 2011-06-28 21:53:39

解決方案1
1 2011-06-28 21:53:39