updated 带圆角的地图实现
This commit is contained in:
parent
bd030944c1
commit
ec4b24aa31
193
index.js
193
index.js
@ -112,106 +112,99 @@
|
|||||||
y:15,
|
y:15,
|
||||||
data:map_data,
|
data:map_data,
|
||||||
draw:function(context){
|
draw:function(context){
|
||||||
context.strokeStyle='#f00';
|
var x_length = this.data[0].length;
|
||||||
context.beginPath();
|
var y_length = this.data.length;
|
||||||
context.moveTo(15,15);
|
for(var i=0; i<x_length; i++){
|
||||||
context.lineTo(15,15-this.size/2);
|
for(var j=0; j<y_length; j++){
|
||||||
context.stroke();
|
context.lineWidth = 2;
|
||||||
context.closePath();
|
context.strokeStyle="#09c";
|
||||||
context.beginPath();
|
if(this.get(j,i)){
|
||||||
context.moveTo(15,15);
|
var x = this.x+i*this.size;
|
||||||
context.lineTo(15,15+this.size/2);
|
var y = this.y+j*this.size;
|
||||||
context.stroke();
|
var code = 0;
|
||||||
context.closePath();
|
if(this.get(j-1,i)&&!(this.get(j-1,i-1)&&this.get(j-1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
|
||||||
// var x_length = this.data[0].length;
|
if(j){
|
||||||
// var y_length = this.data.length;
|
code += 1000;
|
||||||
// for(var i=0; i<x_length; i++){
|
}
|
||||||
// for(var j=0; j<y_length; j++){
|
}
|
||||||
// context.lineWidth = 2;
|
if(this.get(j,i+1)&&!(this.get(j-1,i+1)&&this.get(j+1,i+1)&&this.get(j-1,i)&&this.get(j+1,i))){
|
||||||
// context.strokeStyle="#09c";
|
if(i<x_length-1){
|
||||||
// if(this.get(j,i)){
|
code += 100;
|
||||||
// var x = this.x+i*this.size;
|
}
|
||||||
// var y = this.y+j*this.size;
|
}
|
||||||
// var code = 0;
|
if(this.get(j+1,i)&&!(this.get(j+1,i-1)&&this.get(j+1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
|
||||||
// if(this.get(j-1,i)&&!(this.get(j-1,i-1)&&this.get(j-1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
|
if(j<y_length-1){
|
||||||
// if(j){
|
code += 10;
|
||||||
// code += 1000;
|
}
|
||||||
// }
|
}
|
||||||
// }
|
if(this.get(j,i-1)&&!(this.get(j-1,i-1)&&this.get(j+1,i-1)&&this.get(j-1,i)&&this.get(j+1,i))){
|
||||||
// if(this.get(j,i+1)&&!(this.get(j-1,i+1)&&this.get(j+1,i+1)&&this.get(j-1,i)&&this.get(j+1,i))){
|
if(i){
|
||||||
// if(i<x_length-1){
|
code += 1;
|
||||||
// code += 100;
|
}
|
||||||
// }
|
}
|
||||||
// }
|
if(code){
|
||||||
// if(this.get(j+1,i)&&!(this.get(j+1,i-1)&&this.get(j+1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
|
switch(code){
|
||||||
// if(j<y_length-1){
|
case 1100:
|
||||||
// code += 10;
|
context.beginPath();
|
||||||
// }
|
context.arc(x+this.size/2,y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);
|
||||||
// }
|
context.stroke();
|
||||||
// if(this.get(j,i-1)&&!(this.get(j-1,i-1)&&this.get(j+1,i-1)&&this.get(j-1,i)&&this.get(j+1,i))){
|
context.closePath();
|
||||||
// if(i){
|
break;
|
||||||
// code += 1;
|
case 110:
|
||||||
// }
|
context.beginPath();
|
||||||
// }
|
context.arc(x+this.size/2,y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);
|
||||||
// if(code){
|
context.stroke();
|
||||||
// context.beginPath();
|
context.closePath();
|
||||||
// switch(code){
|
break;
|
||||||
// case 1100:
|
case 11:
|
||||||
// context.arc(x+this.size,y-this.size,this.size/2,.5*Math.PI,1*Math.PI,false);
|
context.beginPath();
|
||||||
// context.stroke();
|
context.arc(x-this.size/2,y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);
|
||||||
// context.closePath();
|
context.stroke();
|
||||||
// break;
|
context.closePath();
|
||||||
// case 110:
|
break;
|
||||||
// context.arc(x+this.size,y+this.size,this.size/2,Math.PI,1.5*Math.PI,false);
|
case 1001:
|
||||||
// context.stroke();
|
context.beginPath();
|
||||||
// context.closePath();
|
context.arc(x-this.size/2,y-this.size/2,this.size/2,0,.5*Math.PI,false);
|
||||||
// break;
|
context.stroke();
|
||||||
// case 11:
|
context.closePath();
|
||||||
// context.arc(x-this.size,y+this.size,this.size/2,1.5*Math.PI,2*Math.PI,false);
|
break;
|
||||||
// context.stroke();
|
default:
|
||||||
// context.closePath();
|
if(Math.floor(code/1000)){
|
||||||
// break;
|
context.beginPath();
|
||||||
// case 1001:
|
context.moveTo(x,y);
|
||||||
// context.arc(x-this.size,y-this.size,this.size/2,0,.5*Math.PI,false);
|
context.lineTo(x,y-this.size/2);
|
||||||
// context.stroke();
|
context.stroke();
|
||||||
// context.closePath();
|
context.closePath();
|
||||||
// break;
|
}
|
||||||
// default:
|
code %= 1000;
|
||||||
// if(code/1000){
|
if(Math.floor(code/100)){
|
||||||
// context.moveTo(x,y);
|
context.beginPath();
|
||||||
// context.lineTo(x,y-this.size);
|
context.moveTo(x,y);
|
||||||
// context.stroke();
|
context.lineTo(x+this.size/2,y);
|
||||||
// context.closePath();
|
context.stroke();
|
||||||
// context.beginPath();
|
context.closePath();
|
||||||
// }
|
}
|
||||||
// code %= 1000;
|
code %= 100;
|
||||||
// if(code/100){
|
if(Math.floor(code/10)){
|
||||||
// context.moveTo(x,y);
|
context.beginPath();
|
||||||
// context.lineTo(x+this.size,y);
|
context.moveTo(x,y);
|
||||||
// context.stroke();
|
context.lineTo(x,y+this.size/2);
|
||||||
// context.closePath();
|
context.stroke();
|
||||||
// context.beginPath();
|
context.closePath();
|
||||||
// }
|
}
|
||||||
// code %= 100;
|
code %= 10;
|
||||||
// if(code/10){
|
if(Math.floor(code/1)){
|
||||||
// context.moveTo(x,y);
|
context.beginPath();
|
||||||
// context.lineTo(x,y+this.size);
|
context.moveTo(x,y);
|
||||||
// context.stroke();
|
context.lineTo(x-this.size/2,y);
|
||||||
// context.closePath();
|
context.stroke();
|
||||||
// context.beginPath();
|
context.closePath();
|
||||||
// }
|
}
|
||||||
// code %= 10;
|
}
|
||||||
// if(code/1){
|
}
|
||||||
// context.moveTo(x,y);
|
}
|
||||||
// context.lineTo(x-this.size,y);
|
}
|
||||||
// context.stroke();
|
}
|
||||||
// }
|
|
||||||
// context.closePath();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user