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);，而不应该在animate方法中进行绑定。它将在动画的每次迭代中添加一个新事件。

canvas.onmousedown函数添加一个形状将无法正常工作

1 个答案: