关于地图的大小缩放 视角的位置平移

2

<button onclick='scalec(0)'>--</button>
<button onclick='scalec(1)'>++</button>
<canvas id='mcvs' height='280' width='280'><canvas>
<script>
var ctx=mcvs.getContext('2d')
var sn=1,xn=0,yn=0,col=20,row=10,dir='r'
function disupdate(){
ctx.clearRect(0,0,300,300)
for(let a=0;a<col*row;a++){let x=a%col,y=(a-x)/col;ctx.font=10*sn+'px solid 黑体';ctx.strokeStyle="black";ctx.strokeText(a,(x*30+15)*sn+xn,(y*30+15)*sn+yn);ctx.strokeStyle='#eee';ctx.strokeRect((x*30)*sn+xn,(y*30)*sn+yn,30*sn,30*sn)}
}disupdate()
function scalec(n){
switch(n){case 0:sn-=0.1;break;case 1:sn+=0.1;break;}
disupdate()
}
setInterval('gog()',10)
function gog(){
if(dir=='r'&&xn>(0-20*30*sn+280)){xn--}else{dir='l'}
if(dir=='l'&&xn<0){xn++}else{dir='r'}
disupdate()
}
</script>

1

<button onclick='scalec(0)'>--</button>
<button onclick='scalec(1)'>++</button>
<canvas id='mcvs' height='300' width='300'><canvas>
<script>
var ctx=mcvs.getContext('2d')
var sn=0.9
function disupdate(){
ctx.clearRect(0,0,300,300)
for(let a=0;a<10*10;a++){let x=a%10,y=(a-x)/10;ctx.strokeStyle='#eee';ctx.strokeRect((x*30)*sn,(y*30)*sn,30*sn,30*sn)}
}disupdate()
function scalec(n){
switch(n){case 0:sn-=0.1;break;case 1:sn+=0.1;break;}
disupdate()
}
</script>