Fatal编程技术网
  • javascript/
  • Javascript 在画布中移动导入的图像

Javascript 在画布中移动导入的图像

javascript html

Javascript 在画布中移动导入的图像,javascript,html,Javascript,Html,我在将运动图像导入画布时遇到问题。 我试过这个代码，但不起作用。 代码只是简单地将一个图像拖到画布中，它工作了，但是当我尝试移动它时，它没有移动。 谁能告诉我哪里出错了。 代码如下： <body> <section> <div> <canvas id="canvas" width="300" height="200" style="border:1px solid" > This text is displayed if your browser

我在将运动图像导入画布时遇到问题。 我试过这个代码，但不起作用。 代码只是简单地将一个图像拖到画布中，它工作了，但是当我尝试移动它时，它没有移动。 谁能告诉我哪里出错了。 代码如下：

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


如果您的浏览器不支持HTML5画布，则会显示此文本。
函数拖动（）{
fillText（“将图像放到画布上”，50,30）；
var-dx=5；
var-dy=5；
var x=170
变量y=100；
var img=新图像（）；
hasText=true，
clearCanvas=函数（）{
if（hasText）{context.clearRect（0，0，canvas.width，canvas.height）；
hasText=false；
}
};
img.addEventListener（“加载”，函数（）{
clearCanvas（）；
背景图像（img，x，y）；
}，假）；
//启用拖放的步骤
canvas.addEventListener（“dragover”，函数（evt）{
evt.preventDefault（）；}，false）；
//处理删除的图像文件-仅Firefox和Google Chrome
canvas.addEventListener（“drop”，函数（evt）{
var files=evt.dataTransfer.files；
如果（files.length>0）{
var file=files[0]；
if（typeof FileReader！=“未定义”&&file.type.indexOf（“图像”）！=-1）{
var reader=new FileReader（）；
reader.onload=函数（evt）{
img.src=evt.target.result；
};
reader.readAsDataURL（文件）；}
}
evt.preventDefault（）；}，false）；
功能doKeyDown（evt）{
开关（evt.keyCode）{
案例38：/*按下向上箭头*/
如果（y-dy>0）{
y-=dy；
}
打破
案例40：按下了向下箭头*/
如果（y+dy0）{
x-=dx；
}
打破
案例39:/*按下右箭头*/
如果（x+dx
有一些小的语法错误导致了一些错误，如果您正在使用firefox，您应该尝试使用firefox的内置javascript错误控制台（
Tools->error console
），或者使用chrome内置控制台（
Tools->javascript console
）这将有助于调试脚本。似乎不会触发附加到画布或画布元素的
keydown
事件，相反，将
keydown
事件侦听器设置为附加到窗口似乎会使其正常工作。此外，加载代码在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>


测试页
如果您的浏览器不支持HTML5画布，则会显示此文本。
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
函数拖动（）{
fillText（“将图像放到画布上”，50,30）；
}
var-dx=5；
var-dy=5；
var x=170
变量y=100；
var img=新图像（）；
hasText=真；
clearCanvas=函数（）{
if（hasText）{
clearRect（0，0，canvas.width，canvas.height）；
hasText=false；
}否则{
clearRect（0，0，canvas.width，canvas.height）；
}
};
img.addEventListener（“加载”，函数（）{
clearCanvas（）；
背景图像（img，x，y）；
}，假）；
//启用拖放的步骤
canvas.addEventListener（“dragover”，函数（evt）{
evt.preventDefault（）；
}，假）；
//处理删除的图像文件-仅Firefox和Google Chrome
canvas.addEventListener（“drop”，函数（evt）{
var files=evt.dataTransfer.files；
如果（files.length>0）{
var file=files[0]；
if（typeof FileReader！=“未定义”&&file.type.indexOf（“图像”）！=-1）{
var reader=new FileReader（）；
reader.onload=函数（evt）{
img.src=evt.target.result；
};
reader.readAsDataURL（文件）；
}
}
evt.preventDefault（）；
}，假）；
功能doKeyDown（evt）{
console.log（evt.keyCode）；
开关（evt.keyCode）{
案例38：/*按下向上箭头*/
如果（y-dy>0）{
y-=dy；
}
打破
案例40：按下了向下箭头*/
如果（y+dy0）{
x-=dx；
}
打破
案例39:/*按下右箭头*/
如果（x+dx
谢谢您的回答。但我尝试了window.addEventListener，但它也不起作用。我认为问题出在（img）上，但我无法找出原因。你是否尝试了我发布的所有代码，还有其他语法错误需要修复。是的，它非常有效