0

私は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>
4

1 に答える 1

1

コードにはいくつかの問題があり、その一部は JSFiddle を理解していないことが原因です。

まず、JSFiddle 内のすべての外部参照を削除します。そのうちの 2 つを使用しておらず、もう 1 つはとにかく JSFiddle によって追加されています。

JSFiddle JavaScript ボックスに追加したすべてのコードは、JSFiddle のloadイベントで実行されるため、最初にこれを行う代わりに:

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

最後にこれを行うだけです：

init();

次に、コードのどこにも定義されていないstrため、これらの行は失敗します。

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

それらを削除するだけです。

最後に、軌跡が表示される理由は、再度描画する前に画像を削除していないためです。描画したものは、canvas明示的にクリアするまでそこにとどまります。への呼び出しがありますがclearRect、下の 10 ピクセルのみをクリアしていcanvasます。

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

これに変更すると、全体がクリアされますcanvas：

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

ここに作業バージョンがあります。

于 2012-12-06T18:46:54.547 に答える