使用HTML5 canvas做地图（3）图片加载平移放大缩小

来源：互联网发布：曲线图制作软件编辑：程序博客网时间：2024/05/02 00:09

终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。

一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。

我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html> 
    <head>
        <meta charset='utf-8'>
        <title>图片加载平移放大缩小示例</title>
        <style>
            html,body{
                margin:0px;
                padding:0px;
            }
            canvas{
                border: 1px solid#000; 
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"width="800"height="800"></canvas>
        <script type="text/javascript"src="main.js"></script>
    </body>
</html>

?
1
2
3
4
5
varcanvas,context; 
functionint(){ 
    canvas=document.getElementById('canvas');
    context=canvas.getContext('2d');
}　

图片加载

创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。

?
1
2
3
4
5
6
7
8
9
10
varimg,//图片对象
    imgIsLoaded//图片是否加载完成;
functionloadImg(){ 
    img=newImage(); 
    img.onload=function(){
        imgIsLoaded=true;
        //draw image
    }
    img.src="map.jpg";
}

图片绘制

绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。

?
1
2
3
4
5
varimgX,imgY,imgScale; 
functiondrawImage(){ 
    context.clearRect(0,0,canvas.width,canvas.height);
    context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
}