老师看一下，显示的不对

(function () {

window.canvasLock =function(obj){

this.height = obj.height;

this.width= obj.width;

this.chooseType = obj.chooseType;

};

//js生成Dom

canvasLock.prototype.initDom=function(){

// 动态创建div

var wrap = document.createElement('div');

// 动态创建div中的h4样式

var str  = '<h4 id="title" class="title">请解锁</h4>';

// 给div添加样式

wrap.setAttribute('style','position:absolute;top:0;left:0;bottom:0;right:0;');

// 动态创建canvas

var canvas = document.createElement('canvas');

// 给canvas添加ID

canvas.setAttribute('id','canvas');

// 给canvas添加样式

        canvas.style.cssText = 'background-color: #305066;display: inline-block;margin-top: 15px;';

        // 把h3的样式添加到div中

        wrap.innerHTML= str;

        // 把canvas添加到div中

        wrap.appendChild(canvas);

        // 设定宽度

        var width = this.width||300;

        // 设置高度

        var height = this.height||300;

        // 把宽度添加到canvas中

        canvas.style.width = width+'px';

        // 把高度添加到canvas中

        canvas.style.height = height+'px';

        canvas.width=width;

        canvas.height = height;

        // 把div添加到body中

        document.body.appendChild(wrap);

}

     canvasLock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板

            this.ctx.strokeStyle = '#CFE6FF';

            this.ctx.lineWidth = 2;

            this.ctx.beginPath();

            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);

            this.ctx.closePath();

            this.ctx.stroke();

       }

     canvasLock.prototype.createCircle = function() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

            var n = this.chooseType;

            var count = 0;

            this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式计算

            this.lastPoint = [];

            this.arr = [];

            this.restPoint = [];

            var r = this.r;

            for (var i = 0 ; i < n ; i++) {

                for (var j = 0 ; j < n ; j++) {

                    count++;

                    var obj = {

                        x: j * 4 * r + 3 * r,

                        y: i * 4 * r + 3 * r,

                        index: count

                    };

                    this.arr.push(obj);

                    this.restPoint.push(obj);

                }

            }

            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

            for (var i = 0 ; i < this.arr.length ; i++) {

                // 画圆函数

                this.drawCle(this.arr[i].x, this.arr[i].y);

            }

            //return arr;

        }

//程序初始化

canvasLock.prototype.init = function(){

this.initDom();

this.canvas = document.getElementById('canvas');

this.ctx = this.canvas.getContext('2d');

//1、确定半径

//2、确定每一个圆的中心坐标点

//3、3个圆14个半径 ，4个圆18个半径

this.createCircle();

}

})();