使用 javascript 在 html5 画布上拖放图像答案

【问题标题】：using javascript to drag and drop images on html5 canvas使用 javascript 在 html5 画布上拖放图像
【发布时间】：2012-11-27 12:41:07
【问题描述】：

我尝试按照在回答Drag and Drop canvas in HTML5 的问题时建议的教程进行操作，但是当我在 Firefox 中加载我的页面时，Firebug 控制台会显示一条错误消息，指出“canvas is null”。

它抱怨的文件是我放置用户交互代码的 JS 文件：

var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;

function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.closePath();
 ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
 canvas = document.getElementById("gameCanvas");
 ctx = canvas.getContext("2d");
 return setInterval(draw, 10);
}

function draw() {
 clear();
 ctx.fillStyle = "#FAF7F8";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "#444444";
 rect(x - 15, y - 15, 30, 30);
}

function myMove(e){
 if (dragok){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
 }
}

function myDown(e){
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
  dragok = true;
  canvas.onmousemove = myMove;
 }
}

function myUp(){
 dragok = false;
 canvas.onmousemove = null; 
}

init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;

主要错误是“画布为空”，当我展开它时，它在第 22 行抱怨init()，在第 57 行抱怨interaction.js()。第 22 行是行：

 ctx = canvas.getContext("2d");

第 57 行是：

init();

有人能指出我哪里出错了吗？

干杯。

我的画布所在的 HTML 是这样的：

<canvas id="gameCanvas" width="1000" height="500" style="border:1px solid">
    Your browser does not support the canvas element.
    </canvas>

【问题讨论】：

您能分享一下您的画布所在的 HTML 吗？可能是 id 的问题，我想canvas = document.getElementById("gameCanvas"); 可能没有被识别。请确认您的身份证件正确。
我在这里测试过：jsfiddle.net/agryson/wfxeH，只要 id 正确，它就可以正常工作。
我已经添加了我的画布所在的 HTML。
嗯...感谢您的更新，应该可以了，请参阅@prageeth 的回答以尝试其他方法...

标签： javascript drag-and-drop html5-canvas

【解决方案1】：

似乎当您的 init() 方法被调用时，canvas 没有呈现。
使用

window.onload = function() {
  init();
};

【讨论】：

感谢您的回复。我已将那部分代码更改为：window.onload = function(){ init(); } canvas.onmousedown = myDown; canvas.onmouseup = myUp;，由于canvas.onmousedown = myDown; 和canvas.onmouseup = myUp; 行我没有收到错误我应该把这些行放在哪里？错误说画布是未定义的，所以我认为这是因为它们应该在一个函数中，但我不确定是哪一个？
将canvas.onmousedown = myDown; canvas.onmouseup = myUp; 行放在上面的window.onload = function() {} 块内
太好了，干杯。这消除了我遇到的错误，但是该代码没有向我在画布上绘制的图像添加任何拖放功能 - 我在这里缺少什么吗？

【解决方案2】：

我在这里测试了你的代码：http://jsfiddle.net/agryson/wfxeH/ 我很确定您可能在画布的 id 中犯了错误。确保您的 HTML 具有：

<canvas id="gameCanvas"></canvas>

【讨论】：

感谢您的评论，但我的 HTML 已经有了 Canvas ID
我知道，我在您发布 HTML sn-p 之前发布了此答案（请参阅我对您问题的最后评论），但很高兴@prageeth 的回答能够提供帮助。 :)