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();
}
}
写的比较臃肿,不过效果实现了,闲了的话再重新写一遍。