canvas.onmousedown函數添加一個形狀將不起作用

Question

我有一些代碼，可以在下面看到。底部是添加形狀的代碼塊。出於某種原因，除非第一行代碼不同，否則它將不起作用。直到我添加了'addShape'代碼，它一切正常，所以我徘徊，如果有人在這裏可以看看，也許找出解決方案？

乾杯

喬恩

編輯也可在的jsfiddle http://jsfiddle.net/pukster/mfNq4/1/

$(document).ready(function() { 
var canvas = $('#myCanvas'); 
var ctx = canvas.get(0).getContext("2d"); 
var context = new webkitAudioContext(); 

var canvasWidth = canvas.width(); 
var canvasHeight = canvas.height(); 

$(window).resize(resizeCanvas); 

function resizeCanvas() { 
    canvas.attr("width", $(window).get(0).innerWidth - 2); 
    canvas.attr("height", $(window).get(0).innerHeight - 2);  
    canvasWidth = canvas.width(); 
    canvasHeight = canvas.height(); 
}; 

resizeCanvas(); 

ctx.strokeStyle = "rgb(255, 0, 0)"; 
ctx.lineWidth = 2; 

var playAnimation = true; 

var Ring = function(x, y, radius, vx, vy) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.vx = vx; 
    this.vy = vy; 
}; 

var rings = []; 

for (var i = 0; i < 10; i++) { 
    var x = Math.random()*ctx.canvas.width; 
    var y = Math.random()*ctx.canvas.height; 
    var vx = Math.random()*6-3; 
    var vy = Math.random()*6-3; 
    rings.push(new Ring(x, y, 40, vx, vy)); 
}; 

function animate() { 
    var ringsLength = rings.length; 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

    for (var i = 0; i < ringsLength; i++) { 
     var tmpRing = rings[i]; 

     for (var j = i+1; j < ringsLength; j++) { 
      var tmpRingB = rings[j]; 

      var dx = tmpRingB.x - tmpRing.x; 
      var dy = tmpRingB.y - tmpRing.y; 

      var dist = Math.sqrt((dx * dx) + (dy * dy)); 

      if(dist < tmpRing.radius + tmpRingB.radius) { 
       var sinewave = new SineWave(context); 

       var angle = Math.atan2(dy, dx); 
       var sine = Math.sin(angle); 
       var cosine = Math.cos(angle); 

       var x = 0; 
       var y = 0; 
       var xb = dx * cosine + dy * sine; 
       var yb = dy * cosine - dx * sine; 

       var vx = tmpRing.vx * cosine + tmpRing.vy * sine; 
       var vy = tmpRing.vy * cosine - tmpRing.vx * sine; 
       var vxb = tmpRingB.vx * cosine + tmpRingB.vy * sine; 
       var vyb = tmpRingB.vy * cosine - tmpRingB.vx * sine; 

       vx *= -1; 
       vxb *= -1; 

       xb = x + (tmpRing.radius + tmpRingB.radius); 

       tmpRing.x = tmpRing.x + (x * cosine - y * sine); 
       tmpRing.y = tmpRing.y + (y * cosine + x * sine); 

       tmpRingB.x = tmpRing.x + (xb * cosine - yb * sine); 
       tmpRingB.y = tmpRing.y + (yb * cosine + xb * sine); 

       tmpRing.vx = vx * cosine - vy * sine; 
       tmpRing.vy = vy * cosine + vx * sine; 

       tmpRingB.vx = vxb * cosine - vyb * sine; 
       tmpRingB.vy = vyb * cosine + vxb * sine; 
       tmpRing.loop = true; 
      }; 
     }; 

     tmpRing.x += tmpRing.vx; 
     tmpRing.y += tmpRing.vy; 

     if (tmpRing.x - tmpRing.radius < 0) { 
      var sinwave = new SinWave(context); 
      tmpRing.x = tmpRing.radius; 
      tmpRing.vx *= -1; 
     } else if (tmpRing.x + tmpRing.radius > ctx.canvas.width) { 
      var sinwave = new SinWave(context); 
      tmpRing.x = ctx.canvas.width - tmpRing.radius; 
      tmpRing.vx *= -1; 
     }; 

     if (tmpRing.y - tmpRing.radius < 0) { 
      var sinwave = new SinWave(context); 
      tmpRing.y = tmpRing.radius; 
      tmpRing.vy *= -1; 
     } else if (tmpRing.y + tmpRing.radius > ctx.canvas.height) { 
      var sinwave = new SinWave(context); 
      tmpRing.y = ctx.canvas.height - tmpRing.radius; 
      tmpRing.vy *= -1; 
     }; 

     ctx.beginPath(); 
     ctx.arc(tmpRing.x, tmpRing.y, 40, 0, Math.PI*2, false); 
     ctx.closePath(); 
     ctx.stroke(); 

//-------------------- The addRing Function Code --------------------// 

     var mx, my; 
     var offsetX, offsetY; 
     //canvas.onmousedown = sglClick; 

     function addRing(x, y, radius, vx, vy) { 
      var x = mx-5; 
      var y = my-5; 
      var vx = Math.random()*6-3; 
      var vy = Math.random()*6-3; 
      rings.push(new Ring(x, y, 40, vx, vy)); 
     } 

     function sglClick(e) { 
      getMouse(e); 
      addRing(); 
     } 

     function getMouse(e) { 
      var element = ctx, offsetX = 0, offsetY = 0; 

      if (element.offsetParent !== undefined) { 
       do { 
        offsetX += element.offsetLeft; 
        offsetY += element.offsetTop; 
       } while ((element = element.offsetParent)); 
      } 

      mx = e.pageX - offsetX; 
      my = e.pageY - offsetY; 
     } 
    }; 

    if(playAnimation) { 
     setTimeout(animate, 33);  
    }; 
}; 

animate(); 

}); 

Answer 1

我注意到幾個問題。

首先，你在幾個地方拼錯了SineWave。其次，您嘗試使用canvas.onmousedown = sglClick;將事件綁定到畫布。您應該嘗試使用canvas.bind('mousedown', sglClick);，而不應該在您的動畫方法中進行綁定。它會在動畫的每個迭代中添加一個新事件。