canvas配合js面向对象编程实现点击分割效果

canvas配合js面向对象编程实现点击鼠标分割div的效果

    是前段时间老铁的一道面试题，觉得挺有意思，昨天有空拿着练练手，顺便复习了下canvas，效果图：

    

    需求分析：

            1.点击div任意地方将div分割开，分割规律为上下分割和左右分割交替进行，1次分割成2块，2次4块，三次8块~~~

    思路：

            1.左右和上下分割实际上相同，只不过方向不同。先按照单向实现，然后只需要通过判断点击的次数，将两个效果分开就行了。贴上代码：

 <style>
        //css部分
        body,html{
            height:100%;
        }
        img{
            width:200px;
            height:200px;
            position: absolute;
        }
        #img1:target,#img2:target{
            z-index: -1;
        }
        /*.d1{*/
            /*width:400px;*/
            /*height:400px;*/
            /*background-color: #c18e42;*/
            /*margin:200px auto;*/
        /*}*/
        #myCanvas{
            background-color: #c18e42;
            margin:200px 500px;
        }
    </style>

html:
   <canvas id="myCanvas" width="400" height="400"></canvas>

js://声明全局变量
//记录单机的次数
		var clickNum = 0,
			canvas = $("#myCanvas")[0],
	//画笔
			context = canvas.getContext("2d"),
			width = $("#myCanvas").width(),
			height = $("#myCanvas").height();
	$("#myCanvas").click(function(){
	//每次画的线条数量
		var nowNum = Math.pow(2,Math.floor(clickNum/2)+1);
		for(let a=1;a<nowNum;a++){
			//a 当前画到第几个 nowNum 画几条
		new changNum().init(a,nowNum);
	}
	clickNum++;
})
function changNum(){
		this.start_l = 0;
		this.start_r = 0;
		this.end_l = 0;
		this.end_r = 0; 
	}
changNum.prototype = {
	init: function(a,nowNum){
		if(clickNum%2==0 ){
			// 如果是偶数 上下划线
			this.end_r=height;
			this.start_l+=width/nowNum*a;
			this.end_l+=width/nowNum*a;
		}else{
			// 如果是奇数 左右划线
			this.end_l=width;
			this.start_r+=height/nowNum*a;
			this.end_r+=height/nowNum*a;
		}
		this.printLine(this.start_l,this.start_r,this.end_l,this.end_r)
	},
	printLine:function(start_l,start_r,end_l,end_r){
		context.moveTo(start_l,start_r);
		context.lineTo(end_l,end_r);
		// 设置样式
		context.lineWidth = 2;
		context.strokeStyle = "#F5270B";
		// 绘制
		context.stroke();
	} 
}

写的比较臃肿，不过效果实现了，闲了的话再重新写一遍。