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

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

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

    

    需求分析：

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

    思路：

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

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(); } }

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