Question

我正在学习Html5，请原谅我。

我正在尝试根据鼠标位置在另一个上显示图像，但是当我移动鼠标时，移动的图像会留下痕迹。还有一个人提出了类似的问题，但我没有成功理解解决方案：（（（此外，我已将代码放在JSFiddle上：http://jsfiddle.net/NinoV/sV522/5/但它不起作用：（

任何人都可以帮助我吗？

  <!DOCTYPE html> 
  <html> 
  <head> 
  <title>Prova</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">   </script>    
  </head>
     <script type="text/javascript">
  window.addEventListener('load', init, false);

  var canvas;
  var ctx;
  var canvasX;
  var canvasY;
  var mouseIsDown = 0;
  var move = "";
  var prevX;
  var prevY;
  function init() {
    canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     cursore = new Image();
     cursore.src ='http://placekitten.com/g/50/50';    
     canvas.addEventListener("mousedown",mouseDown, false);
     canvas.addEventListener("mousemove",mouseXY, false);
     document.body.addEventListener("mouseup", mouseUp, false);
  }


  function draw() {
     var ctx = document.getElementById('canvas').getContext('2d');
     var img = new Image();
     var bao = new Image();
     bao.src ='http://placekitten.com/g/480/390';            
     bao.onload = function(){           
        ctx.drawImage(bao,0,0);
    };
  }

  function kete(n,x,y){
     var centerX = x / 2;
     var centerY = y / 2;
     var radius = 55;
     ctx.clearRect(prevX - radius, prevY - radius, radius * 2, radius * 2);
     //ctx.clearRect(prevX, prevY, radius, 0, 2 * Math.PI, false);      
     y=1;
     ctx.beginPath();
     ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
     ctx.lineWidth = 5;
     ctx.strokeStyle = '#003300';
     ctx.stroke();
     prevX=centerX;
     prevY=centerY;
  }

  function mouseUp() {
     mouseIsDown = 0;
     mouseXY();
  }

  function mouseDown() {
     mouseIsDown = 1;
     mouseXY();
  }

  function mouseXY(e) {
     e.preventDefault();
     canvasX = e.pageX - canvas.offsetLeft;
     canvasY = e.pageY - canvas.offsetTop;
     showPos();
  }

  function showPos() {

     ctx.font="12px Arial";
     ctx.textAlign="center";
     ctx.textBaseline="bottom";
     ctx.fillStyle="rgb(0,0,0)";
     if (mouseIsDown) str = str + " down";
     if (!mouseIsDown) str = str + " up";
     ctx.clearRect(0,390, canvas.width,canvas.height);
     if (canvasY>=201 && canvasY<=253) move = "A";
     if (canvasY>=254 && canvasY<=309) move = "B";

     if (canvasY>=88 && canvasY<=140) move = "b";
     if (canvasY>=141 && canvasY<=196) move = "a";
     if ((canvasX>=17 && canvasX<=444) && (canvasY>=88 && canvasY<=309)){
        //cursore.clearRect(prevX,prevY, cursore.width,cursore.height);
        ctx.drawImage(cursore,canvasX,canvasY);
        prevX=canvasX;
        prevY=canvasY;
     }else{
        move = canvasX+", "+canvasY;
     }
     ctx.fillText(move, canvas.width-50, canvas.height-50, canvas.width-10);
  }
  </script>
  </head> 

  <body  onload="draw();">
  <canvas id="canvas" width="480" height="500" style="background-color:white">
  Sorry, your browser doesn't support canvas technology
  </canvas>
  </body>
  </html>

Answer 1

您的代码存在一些问题，其中一些问题是由于不理解JSFiddle引起的。

首先，删除JSFiddle中的所有外部引用。你没有使用其中两个，而另一个则由JSFiddle添加。

您在JSFiddle JavaScript框中添加的所有代码都将在JSFiddle中的load事件中执行，因此不要在开始时执行此操作：

window.addEventListener('load', init, false);

最后这样做：

init();

接下来，您的代码中没有任何地方定义str，因此这些行失败了：

 if (mouseIsDown) str = str + " down";
 if (!mouseIsDown) str = str + " up";

删除它们。

最后，您看到跟踪的原因是因为您在再次绘制图像之前未删除图像。一旦你在canvas上绘制了东西，它就会停留在那里直到你明确地清除它。虽然您拨打了clearRect，但它只清除了canvas的底部十个像素：

ctx.clearRect(0,390, canvas.width,canvas.height);

将其更改为此，它将清除整个canvas：

ctx.clearRect(0,0, canvas.width,canvas.height);

Here is a working version

html5画布移动图像给出了一个轨迹

1 个答案: