PhoneGap：iPhone上的画布渲染

Question

我在iPhone的PhoneGap应用程序中有一个画布，我正在构建一个锁模式，使用与＆lt;非常相似的东西。 How I can create a pattern login like Android in HTML5?＆gt;。我重写了部分以保持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
    }
}

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