有几个问题不太懂，麻烦解答下

100

101

102

103

104

105

(function(){
        //给window定义一个全局变量，因为是全局变量，所以外面可以调用，就是给传入的对象定义宽和高
        window.canvasLock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            //指一行圆圈的个数，已经在调用这个函数的里面传入了chooseType的值，所以可以直接使用
            this.chooseType = obj.chooseType;
        };
 
        //js方式动态生成dom
        canvasLock.prototype.initDom = function(){
            //document.createElement()是创建一个元素对象，这里是创建了一个div
            var wrap = document.createElement("div");
            //定义了一个h4标签，以及它的样式
            var str = "<h4 id='title' class='title'>绘制解锁图案</h4>";
            //为div设置样式属性
            wrap.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");
 
 
            //创建一个canvas
            var canvas = document.createElement("canvas");
            //为canvas设置id
            canvas.setAttribute("id","canvas");
            //为canvas添加样式
            canvas.style.cssText = "background-color:#305066;diaplay:inline-block;margin-top:15px;";
 
            //把h4标签放到了div中
            wrap.innerHTML = str;
            //将canvas生成到div中
            wrap.appendChild(canvas);
 
            var width = this.width || 300;
            var height = this.height || 300;
            //将div放在body中
            document.body.appendChild(wrap);
 
            canvas.style.width = width+"px";
            canvas.style.height = height+"px";
 
            //将canvas的宽和高都等于上面定义的宽和高
            canvas.width = width;
            canvas.height = height;
        }
 
 
        //画圆的函数
        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,2*Math.PI*2,true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
 
 
        //定义生成圆圈的函数
        canvasLock.prototype.createCircle = function(){
            //定义变量n为圆圈的个数
            var n = this.chooseType;
            var count = 0;
            //定义圆的半径为r,根据圆的半径和canvas宽度的关系计算出这个公式
            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
                    };
                    //将obj的值存入arr中
                    this.arr.push(obj);
                }
 
            }
 
            //清除画布中的内容
            this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
            //循环每个arr值，将值传入画圆的函数中
            for(var i=0;i<this.arr.length;i++){
                this.drawCle(this.arr[i].x,this.arr[i].y);
            }
        }
 
        //给canvasLock原型上定义一个init函数，就是调用initDom，程序初始化
        canvasLock.prototype.init = function(){
            this.initDom();
            //获取canvas
            this.canvas = document.getElementById("canvas");
            this.ctx = this.canvas.getContext("2d");
            //调用生成圆圈的函数
            this.createCircle();
        }
 
})()

慕标0373250 2018-06-28

源自：HTML5 Canvas案例 2-2 画圆函数介绍

收起

2回答

妮可妮可妮_ 2018-06-29 13:32:17

清除画布内容是因为后面有一个调用生成圆的函数。所以一开始画布上不应该有内容，只有在这个方法调用成功之后才会去在画布上画圆
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。width可以不加px,他会默认为带px的值,但是style的width必须要加px单位
事件中的this是代表当前点击的元素可以不用this 可以直接用这个元素

收起回答