html5 canvas移動圖像給出一條線索

我在學習Html5，所以請原諒我。html5 canvas移動圖像給出一條線索

我試圖根據鼠標位置顯示另一個圖像，但是當我移動鼠標移動的圖像留下蹤跡。有另外一個誰問過類似的問題，但我沒有成功，瞭解解決方案：（（（此外，我已經把代碼上的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>

來源

2012-12-02 Nino Vessella

有幾個問題，你的代碼，其中一些引起不理解的jsfiddle。

首先，刪除的jsfiddle所有外部引用。你不能使用了其中兩個，另一個是JSFiddle添加的。

0123你在的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。

來源

2012-12-06 18:46:54 robertc

html5 canvas移動圖像給出一條線索

回答

相關問題