javascript - PhoneGap：iPhone 上的画布渲染

Question

我在 iPhone 的 PhoneGap 应用程序中有一个画布，我正在其中构建一个锁定模式，使用非常类似于 < How I can create a pattern login like Android in HTML5? >。我重写了一些部分以使 jQuery 远离应用程序，而且圆圈和线条也没有那么详细。

我正在 Chrome 中进行桌面测试，并在 Safari 中进行了检查，此代码运行良好且符合预期。然而，我的问题是，在我的 iPhone 5 和 iOS 模拟器上都没有渲染任何内容。

GLOBAL.Swiper = function( element , width , height ) {
    var _self = this;
    var theCanvas;
    var code = '';
    var stopDrawing = false;
    var dragging=false;
    var event = {
        start : 'ontouchstart' in window ? 'touchstart' : 'mousedown',
        move : 'ontouchstart' in window ? 'touchmove' : 'mousemove',
        end : 'ontouchstart' in window ? 'touchend' : 'mouseup'
    }

    getCode = function() {
        return code;
    }
    resetCode = function() {
        code = '';
    }

    init = function( element , width , height) {
        // Mark the Canvas, get its context, and set up the options
        theCanvas = {
            el: element,
            ctx : element.getContext('2d'),
            height : height || element.height,
            width : width || element.width,
            pad : 20 ,
            circles : [],
            selectedCircles : [],
            startPoint : {x:0, y:0}
        }

        var rad = (theCanvas.width - theCanvas.pad * 4) / 3;

        // Set up the circles
        for ( var i=0;i<3;i++ ) {
            for ( var j=0;j<3;j++ ) {
                theCanvas.circles.push ( new Circle ({
                    x : j * ( theCanvas.pad + rad ) + theCanvas.pad + rad / 2,
                    y : i * ( theCanvas.pad + rad ) + theCanvas.pad + rad / 2
                }, rad / 2) )
            }
        }
        theCanvas.el.addEventListener (event.start , onStart );
        theCanvas.el.addEventListener (event.move , onMove );
        theCanvas.el.addEventListener (event.end , onEnd );

        console.log ("Swiper Initialized");

        drawCircles();
    }
    /**
     * Circle
    **/
    Circle = function (center, radius, fill, stroke, hover, active) {
        console.log ("NEW CIRCLE CREATED");
        var center = {
            x: center.x,
            y: center.y
        },
        radius = radius,
        fill = fill || '#482b5a',
        hover = hover || '#663d80',
        active = active || '#71b644',
        stroke = stroke || '';

        this.position = function(){
            return {x:center.x, y:center.y};
        }
        this.draw = function(ctx) {
            ctx.fillStyle = this.selected ? active : this.hovering ? hover : fill;
            if (stroke) ctx.strokeStyle = stroke;

            ctx.beginPath();
            ctx.arc(center.x, center.y, radius, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();
            if (stroke) ctx.stroke();
        };

        this.isPointInPath = function(x, y) {
            return Math.sqrt(Math.pow(center.x - x, 2) + Math.pow(center.y - y, 2)) <= radius;
        };
        this.hovering = false;
        this.selected = false;
    }
    /**
     * drawCircles
    **/
    drawCircles = function() {
        var ctx = theCanvas.ctx;

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

        for (var i = 0; i < theCanvas.circles.length; i++) {
            theCanvas.circles[i].draw(ctx);
        }

        // Draw the lines connecting each circle
        if (dragging && theCanvas.selectedCircles.length > 1) {
            var pos = theCanvas.selectedCircles[0].circ.position();
            ctx.beginPath();
            ctx.lineWidth = 10;
            ctx.strokeStyle = "#251";
            ctx.moveTo(pos.x, pos.y);
            for (var j = 1; j < theCanvas.selectedCircles.length; j++){
                pos = theCanvas.selectedCircles[j].circ.position();
                ctx.lineTo(pos.x,pos.y);
            }
            ctx.stroke();
            ctx.closePath();
        }
    }
    /**
     * events - onStart, onMove, onEnd
    **/
    onStart = function() {
        dragging = true;
        drawCircles();
    }
    onMove = function(e) {
        for (var i = 0; i < theCanvas.circles.length; i++) {
            var cir = theCanvas.circles[i];
            var pip = cir.isPointInPath(e.offsetX, e.offsetY);
            cir.hovering = pip;
            if (dragging && pip && !cir.selected) {
                theCanvas.selectedCircles.push({circ:cir, index:i});
                cir.selected = true;
            }
            drawCircles();
        }
    }
    onEnd = function() {
        dragging = false;
        code = '';

        while ( theCanvas.selectedCircles.length > 0 ) {
            var singleCircle;
            theCanvas.selectedCircles[0].circ.selected = false;

            singleCircle = theCanvas.selectedCircles.shift();

            code += (singleCircle.index + 1).toString();
        }
        alert (code);

        // reset selection
        for (var i = 0; i < theCanvas.selectedCircles.length; i++)
            theCanvas.selectedCircles[i].circ.selected = false;

        theCanvas.selectedCircles = [];
        drawCircles();
    }

    if ( element ) init ( element , width , height);

    return {
        init : init,
        draw : drawCircles,
        getCode : getCode,
        resetCode : resetCode,
        c : theCanvas
    }
}

像往常一样，任何帮助将不胜感激。